我使用Google Maps API创建了一个样式化地图。完整的HTML在这里：
<!DOCTYPE html>
<html>
<head>
<title>Live Markers</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var customMapType = new google.maps.StyledMapType([
{
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#ffffff"
},
{
"visibility": "off"
}
]
},
{
"featureType": "all",
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative",
"elementType": "geometry",
"stylers": [
{
"visibility": "on"
},
{
"color": "#333739"
},
{
"weight": 0.8
}
]
},
{
"featureType": "landscape",
"elementType": "geometry",
"stylers": [
{
"color": "#2ecc71"
}
]
},
{
"featureType": "poi",
"elementType": "all",
"stylers": [
{
"color": "#2ecc71"
},
{
"lightness": -7
}
]
},
{
"featureType": "poi.park",
"elementType": "all",
"stylers": [
{
"color": "#2ecc71"
}
]
},
{
"featureType": "road",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#333739"
},
{
"weight": 0.3
},
{
"lightness": 10
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"color": "#2ecc71"
},
{
"lightness": -28
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{
"color": "#2ecc71"
},
{
"visibility": "on"
},
{
"lightness": -15
}
]
},
{
"featureType": "road.local",
"elementType": "geometry",
"stylers": [
{
"color": "#2ecc71"
},
{
"lightness": -18
}
]
},
{
"featureType": "transit",
"elementType": "geometry",
"stylers": [
{
"color": "#2ecc71"
},
{
"lightness": -34
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#333739"
}
]
}
], {
name: 'Custom Style'
});
var customMapTypeId = 'custom_style';
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 2,
center: {lat: 40.674, lng: -73.946}, // Brooklyn.
disableDefaultUI: true
});
map.mapTypes.set(customMapTypeId, customMapType);
map.setMapTypeId(customMapTypeId);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap" async defer></script>
</body>
</html>
我想要显示一个实时＆＃34;标记＆＃34;在这张地图上。服务器上的PHP脚本使用纯文本坐标列表响应任何请求。此响应中可能有一个或多个坐标。可以重复。一个例子是：
52.374 4.89
37.77 -122.394
55.75 37.617
37.77 -122.394
必须每5秒对该PHP脚本发出一次请求。如果响应与最后一个不同，则所有唯一坐标应显示为＆＃34;标记＆＃34;在地图上。
但他们不应该是静止的。我想到的是某种＆＃34; drop＆＃34;效果，其中新标记是动画的纯色，圆形扩展然后淡出。应忽略重复项（在一个请求中）。
如果响应只包含一对坐标，则只能为一个标记设置动画。如果还有更多，则必须同时为所有位置设置动画。这意味着，无论有多少标记，所有动画完成所需的时间都是不变的。
我该如何实现？我想使用JS和XMLHttpRequest向PHP脚本发出请求并获取字符串。甚至可以用JS和GMaps API做到这一点吗？如果是这样，怎么样？
另外：我如何实现动画本身？
答案 0 :(得分：0)
使用计时器setInterval(ajaxRequestFunction, 5000)
然后在ajaxRequestFunction内创建一个成功处理程序，它将使用标记更新您的googlemap。您（可能？）想要首先清除标记，然后通过首先每次创建一个标记对象然后将其添加到地图中来添加每个标记。
googlemaps api具有客户端可用的所有功能。