0
我試圖用google地圖來擺弄。 我在網上提出了一個很好的例子，它利用地圖疊加而不是標記來允許更多的定製標記。 我這樣做是因爲我想將標記從一個svg路徑動畫到另一個svg路徑。 問題：當我插入SVG SVG的節目，但沒有路徑/形狀等當使用Javascript插入時，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條隨機移動路徑的原因是因爲這就是它的外觀，從我的SVG圖像從插畫中保存的HTML，我知道它不應該是必要的，但作爲一個SVG顯示，但插入啊並寫作svg並不認爲我會試圖模仿它。
我需要使用一個路徑，因爲我想動畫一個圓點到點，就像標記越來越大。爲了動畫點，我不能使用圖像方法，我將不得不使用路徑和動畫路徑。
任何想法，爲什麼插入該風格SVG將無法正常工作？它是谷歌地圖的東西/ JavaScript的東西？我應該嘗試試試snap還是d3？
任何想法將是巨大的，因爲我只是不明白爲什麼它拒絕顯示路徑（或任何其他形狀）:)