動態化座標
繪製地圖
動態顯示單一座標
var map1 = new google.maps.Map(document.getElementById('map1'), {
zoom: 13,
center: {lat: 59.325, lng: 18.070},
clickableIcons: false,
gestureHandling: 'greedy',
disableDefaultUI: true,
});
var marker1 = new google.maps.Marker({
map: map2,
draggable: true,
animation: google.maps.Animation.DROP,
position: {lat: 59.327, lng: 18.067},
});
marker1.addListener('click', function() {
if (this.getAnimation() !== null) {
this.setAnimation(null);
} else {
this.setAnimation(google.maps.Animation.BOUNCE);
}
});
動態顯示多個座標
var $neighborhoods = [
{lat: 52.511, lng: 13.447},
{lat: 52.549, lng: 13.422},
{lat: 52.497, lng: 13.396},
{lat: 52.517, lng: 13.394}
];
var $markers = [];
var $map2;
function initMap() {
$map2 = new google.maps.Map(document.getElementById('map2'), {
zoom: 12,
center: {lat: 52.520, lng: 13.410},
clickableIcons: false,
gestureHandling: 'greedy',
disableDefaultUI: true,
});
}
//點擊執行此function
function drop() {
//若已有值初始需清掉
if ( $markers.length > 0 ) {
for (var i = 0; i < $markers.length; i++) {
$markers[i].setMap(null);
}
$markers = [];
}
for ( var i = 0; i < $neighborhoods.length; i++ ) {
//此timeout必須使用function呼叫回傳,否則無法等待時間結束後才執行下個動作
addMarkerWithTimeout($neighborhoods[i], i * 200);
}
}
function addMarkerWithTimeout(position, timeout) {
window.setTimeout(function() {
var marker = new google.maps.Marker({
position: position,
map: $map2,
animation: google.maps.Animation.DROP
});
addAnimationBounce(marker);
$markers.push(marker);
}, timeout);
}
function addAnimationBounce(marker) {
marker.addListener('click', function() {
if (this.getAnimation() !== null) {
this.setAnimation(null);
} else {
this.setAnimation(google.maps.Animation.BOUNCE);
}
});
}