Saya mencoba mengutak-atik Google Maps. Saya mengangkat contoh online yang bagus yang menggunakan hamparan peta alih-alih penanda untuk memungkinkan penanda yang lebih disesuaikan. Saya melakukan ini karena saya ingin menganimasikan penanda dari satu jalur svg ke jalur lainnya. Masalah: ketika saya memasukkan svg, svg ditampilkan, tetapi tidak ada jalur/bentuk dll.
<!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>
Mohon maaf atas inline css dan js, saya hanya menguji dan merasa kesal dengan ini... JS
//Membuat penanda khusus
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);
Alasan saya menambahkan 2 jalur perpindahan acak adalah karena itulah tampilannya di html dari gambar svg saya yang disimpan dari ilustrator, saya tahu itu tidak perlu tetapi sebagai tampilan svg, tetapi memasukkan svg tulisan tangan tidak' Saya pikir saya akan mencoba menirunya.
Saya perlu menggunakan jalur, karena saya ingin menganimasikan lingkaran ke suatu titik, seperti penandanya bertambah. Untuk menganimasikan titik, saya tidak dapat menggunakan metode gambar, saya harus menggunakan jalur dan menganimasikan jalur tersebut.
Adakah ide mengapa memasukkan gaya SVG itu tidak berhasil? Apakah ini masalah peta Google/javascript? Haruskah saya mencoba snap atau d3?
pemikiran apa pun akan bagus karena saya tidak mengerti mengapa ia menolak untuk menunjukkan jalur (atau bentuk lainnya):)
