ฉันพยายามเล่นซอกับ Google Maps ฉันยกตัวอย่างที่ดีทางออนไลน์ซึ่งใช้การซ้อนทับแผนที่แทนเครื่องหมายเพื่อให้สามารถปรับแต่งเครื่องหมายได้มากขึ้น ฉันทำสิ่งนี้เพราะฉันต้องการทำให้เครื่องหมายเคลื่อนไหวจากเส้นทาง 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>
โปรดแก้ตัว inline 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 จากรูปภาพ svg ของฉันที่บันทึกจากนักวาดภาพประกอบ ฉันรู้ว่ามันไม่จำเป็น แต่เป็นการแสดง svg แต่การแทรก svg ที่เขียนด้วยลายมือกลับไม่ได้ ฉันคิดว่าฉันจะพยายามเลียนแบบมัน
ฉันจำเป็นต้องใช้เส้นทาง เนื่องจากฉันต้องการทำให้วงกลมเคลื่อนไหวไปยังจุดหนึ่ง เหมือนกับว่าเครื่องหมายกำลังขยายใหญ่ขึ้น ในการสร้างภาพเคลื่อนไหวให้กับจุดต่างๆ ฉันไม่สามารถใช้วิธีการสร้างภาพได้ ฉันจะต้องใช้เส้นทางและทำให้เส้นทางเคลื่อนไหว
แนวคิดใดบ้างที่ว่าทำไมการแทรกสไตล์ SVG จึงไม่ได้ผล มันเป็นเรื่องของ Google Maps / จาวาสคริปต์หรือไม่? ฉันควรลองใช้ snap หรือ d3
ความคิดใด ๆ จะดีมากเพราะฉันไม่เข้าใจว่าทำไมมันถึงปฏิเสธที่จะแสดงเส้นทาง (หรือรูปร่างอื่น ๆ :)
