【发布时间】：2015-12-23 03:07:21
【问题描述】：
我正在尝试使用谷歌地图。 我在网上举了一个很好的例子，它利用地图叠加而不是标记来允许更多定制的标记。 我这样做是因为我想将标记从一个 svg 路径设置为另一个。 问题：当我插入 svg 时，svg 显示，但没有路径/形状等。
<!DOCTYPE HTML>
<html>
<head>
<title>Google Maps API</title>
<style type="text/css">
.icon-container {
background-color:yellow;
width: 20px;
height: 20px;
position:absolute;
}
#icon {
position:absolute;
width:30px;
height:30px;
}
@-webkit-keyframes example {
0% {opacity: 0; width: 30px; height: 30px;}
50% {opacity: 0.5; width: 50px; height: 50px;}
100% {opacity: 1; width: 30px; height: 30px;}
}
@-webkit-keyframes example2 {
0% {opacity: 1; width: 30px; height: 30px;}
50% {opacity: 0.5; width: 15px; height: 15px;}
100% {opacity: 0; width: 0px; height: 0px;}
}
#icon.show{
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 1.5s; /* Chrome, Safari, Opera */
animation-name: example;
animation-duration:1.5s;
opacity:1;
}
#icon.show{-webkit-animation-timing-function: ease-in-out;}
#icon.show.alter {
-webkit-animation-name: example2; /* Chrome, Safari, Opera */
-webkit-animation-duration: 1.5s; /* Chrome, Safari, Opera */
animation-name: example;
animation-duration:1.5s;
}
#icon.show.hide {
-webkit-animation-name: example2; /* Chrome, Safari, Opera */
-webkit-animation-duration: 1.5s; /* Chrome, Safari, Opera */
animation-name: example;
animation-duration:1.5s;
opacity: 0;
}
#map-canvas {
width: 700px;
height: 400px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript" src="CustomGoogleMapMarker.js"></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(-31.9546781,115.852662);
var mapOptions = {
zoom: 14,
center: myLatlng,
disableDefaultUI: true
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
/*
// Example standard marker
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
*/
overlay = new CustomMarker(
myLatlng,
map,
{
marker_id: '123'
}
);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"> </div>
<div>
<button type="button" id="show-button">Show</button>
<button type="button" id="active-button">Active</button>
<button type="button" id="hide-button">Hide</button>
</div>
</body>
</html>
请原谅内联 css 和 js，我只是在测试，对此感到恼火...... JS
//创建自定义标记
function CustomMarker(latlng, map, args) {
this.latlng = latlng;
this.args = args;
this.setMap(map);
}
//extends overlay view and inherits its methods
CustomMarker.prototype = new google.maps.OverlayView();
CustomMarker.prototype.draw = function() {
var self = this;
var div = this.div;
if (!div) {
div = this.div = document.createElement('div');
div.className = 'marker';
div.style.position = 'absolute';
div.style.cursor = 'pointer';
div.style.width = '20px';
div.style.height = '20px';
svg = this.svg = document.createElement('svg');
svg.version="1.1";
svg.className = 'icon-container';
svg.setAttribute("viewBox","0 0 300 300");
svg.style.height = "300px";
svg.style.width = "300px";
svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
svg.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");
svg.setAttribute("x", "0px");
svg.setAttribute("y", "0px");
svg.setAttribute("enable-background", "new 0 0 300 300");
svg.setAttribute("xml:space", "preserve");
moveOne = this.moveOne = document.createElementNS('http://www.w3.org/2000/svg', "path");
moveOne.setAttribute("fill", "none");
moveOne.setAttribute("stroke", "#231F20");
moveOne.setAttribute("stroke-miterlimit", "10");
moveOne.setAttribute("d", "M141.674,237.632");
moveTwo = this.moveTwo = document.createElementNS('http://www.w3.org/2000/svg', "path");
moveTwo.setAttribute("fill", "none");
moveTwo.setAttribute("stroke", "#231F20");
moveTwo.setAttribute("stroke-miterlimit", "10");
moveTwo.setAttribute("d", "M47.891,113.798");
icon = this.icon = document.createElementNS('http://www.w3.org/2000/svg', "path");
icon.setAttribute('id','icon');
icon.setAttribute("d", "M201.223,100.373c0,50.655-41.954,72.492-72.28,72.492 c-48.548,0-72.28-31.951-72.28-72.492c0-39.919,32.361-72.28,72.28-72.28C168.862,28.093,201.223,60.454,201.223,100.373z");
icon.setAttribute("fill", "#000");
icon.setAttribute("stroke-miterlimit","10");
icon.style.position = "absolute";
svg.appendChild(moveOne);
svg.appendChild(moveTwo);
svg.appendChild(icon);
div.appendChild(svg);
if (typeof(self.args.marker_id) !== 'undefined') {
div.dataset.marker_id = self.args.marker_id;
}
google.maps.event.addDomListener(div, "click", function(event) {;
console.log("click");
console.log(this);
this.className += " click";
});
var panes = this.getPanes();
panes.overlayImage.appendChild(div);
}
var point = this.getProjection().fromLatLngToDivPixel(this.latlng);
if (point) {
div.style.left = (point.x - 10) + 'px';
div.style.top = (point.y - 20) + 'px';
}
};
CustomMarker.prototype.remove = function() {
if (this.div) {
this.div.parentNode.removeChild(this.div);
this.div = null;
}
};
CustomMarker.prototype.getPosition = function() {
return this.latlng;
};
function init(){
$('#show-button').click(function() {
console.log("show the icon");
$('#icon').addClass('show');
});
$('#active-button').click(function() {
console.log("alter the icon");
});
$('#hide-button').click(function() {
console.log("hide the icon");
});
}
$(document).ready(init);
我添加 2 个随机移动路径的原因是因为这就是它在 html 中从 illustrator 保存的 svg 图像中的外观，我知道这不是必需的，但作为 svg 显示，但插入手写svg 我不认为我会尝试模仿它。
我需要使用路径，因为我想将一个圆动画到一个点，就像标记正在增长一样。为了对无法使用图像方法的点进行动画处理，我必须使用路径并为路径设置动画。
任何想法为什么插入那种样式的 SVG 不起作用？它是谷歌地图的东西/javascript的东西吗？我应该尝试 snap 还是 d3？
任何想法都会很棒，因为我只是不明白为什么它拒绝显示路径（或任何其他形状）:)
【问题讨论】：
标签： javascript google-maps svg