Javascript 如何更新谷歌地图中多个标记的位置
我正在使用GoogleMapsAPI在地图上放置标记。标记的gps坐标存储在mySQL数据库中。我已经能够创建标记，但是位置会不断变化，因此我想知道如何更新标记的位置，以便标记在地图上移动。以下是我目前的代码：Javascript 如何更新谷歌地图中多个标记的位置,javascript,google-maps-api-3,marker,Javascript,Google Maps Api 3,Marker,我正在使用GoogleMapsAPI在地图上放置标记。标记的gps坐标存储在mySQL数据库中。我已经能够创建标记，但是位置会不断变化，因此我想知道如何更新标记的位置，以便标记在地图上移动。以下是我目前的代码： <!DOCTYPE html> <html> <head><title>Map</title> <style type="text/css"> html { height: 100% } body { hei
<!DOCTYPE html>
<html>
<head><title>Map</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(36.9947935, -122.0622702);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var image = new google.maps.MarkerImage('busIcon.png',
// The image size
new google.maps.Size(44, 46),
// The origin
new google.maps.Point(0,0),
// The anchor
new google.maps.Point(22, 23));
var shadow = new google.maps.MarkerImage('busIcon_shadow.png',
new google.maps.Size(58, 46),
new google.maps.Point(0,0),
new google.maps.Point(22, 23)
);
var shape = {
coord: [1, 1, 1, 45, 43, 45, 43 , 1],
type: 'poly'
};
var markers = [
<?php
// Make a MySQL Connection
mysql_connect("**********", "**********", "**********") or die(mysql_error());
mysql_select_db("matsallen") or die(mysql_error());
//Get number of rows
$result = mysql_query
(
'SELECT COUNT(*) FROM busTrack AS count'
)
or die(mysql_error());
$row = mysql_fetch_array( $result );
$length = $row["COUNT(*)"];
for ($count = 1; $count <= $length; $count++) {
//Get data from MySQL database
$result = mysql_query
(
'SELECT * FROM busTrack WHERE busID = '.$count
)
or die(mysql_error());
// store the record of the "busTrack" table into $row
$row = mysql_fetch_array( $result );
// Echo the data into the array 'markers'
$output = '{id: "Bus '.$row[busID].'", lat: '.$row[lat].', lng: '.$row[lon].'}';
if ($count != $length) {
$output = $output.',';
};
echo $output;
};
?>
];
for (index in markers) addMarker(map, markers[index]);
function addMarker(map, data) {
//create the markers
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.lng),
map: map,
title: data.id,
icon: image,
shape: shape,
shadow: shadow
});
//create the info windows
var content = document.createElement("DIV");
var title = document.createElement("DIV");
title.innerHTML = data.id;
content.appendChild(title);
var infowindow = new google.maps.InfoWindow({
content: content
});
// Open the infowindow on marker click
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:75%; height:75%; margin:10%; allign:center;"></div>
</body>
</html>
地图
html{高度：100%}
正文{高度：100%；边距：0px；填充：0px}
#地图画布{高度：100%}
函数初始化（）{
var latlng=新的google.maps.latlng（36.9947935，-122.0622702）；
变量myOptions={
缩放：15，
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
var image=new google.maps.MarkerImage（'busIcon.png'，
//图像大小
新谷歌地图尺寸（44,46），
//起源
新google.maps.Point（0,0），
//锚
新的google.maps.Point（22,23））；
var shadow=new google.maps.MarkerImage（'busIcon_shadow.png'，
新谷歌地图大小（58,46），
新google.maps.Point（0,0），
新谷歌地图点（22,23）
);
变量形状={
坐标：[1,1,1,45,43,45,43,1]，
类型：“poly”
};
变量标记=[
];
对于（标记中的索引）addMarker（映射，标记[index]）；
功能addMarker（地图、数据）{
//创建标记
var marker=new google.maps.marker({
位置：新的google.maps.LatLng（data.lat，data.lng），
地图：地图，
标题：data.id，
图标：图像，
形状：形状，
影子：影子
});
//创建信息窗口
var content=document.createElement（“DIV”）；
var title=document.createElement（“DIV”）；
title.innerHTML=data.id；
内容。子项（标题）；
var infowindow=new google.maps.infowindow({
内容：内容
});
//单击打开信息窗口
google.maps.event.addListener（标记“单击”，函数（）{
信息窗口。打开（地图、标记）；
});
}
}
marker.setPosition(new google.maps.LatLng(newLat,newLng);
var myMarkers = new Array();
for (index in markers) {
myMarker[ markers[index]['id'] ] = addMarker(map, markers[index]);
}
function addMarker(map, data) {
//create the markers
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.lng),
map: map,
title: data.id,
icon: image,
shape: shape,
shadow: shadow
});
//create the info windows
var content = document.createElement("DIV");
var title = document.createElement("DIV");
title.innerHTML = data.id;
content.appendChild(title);
var infowindow = new google.maps.InfoWindow({
content: content
});
// Open the infowindow on marker click
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
return marker;
}
myMarkers['Bus 47'].setPosition(new google.maps.LatLng(newLat,newLng);
我没有测试上面的代码，因此可能会出现一些小的语法错误或其他问题，但这应该会让您有所了解。要更改标记的位置，请在该标记上调用setPosition（）：
marker.setPosition(new google.maps.LatLng(newLat,newLng);
var myMarkers = new Array();
for (index in markers) {
myMarker[ markers[index]['id'] ] = addMarker(map, markers[index]);
}
function addMarker(map, data) {
//create the markers
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.lng),
map: map,
title: data.id,
icon: image,
shape: shape,
shadow: shadow
});
//create the info windows
var content = document.createElement("DIV");
var title = document.createElement("DIV");
title.innerHTML = data.id;
content.appendChild(title);
var infowindow = new google.maps.InfoWindow({
content: content
});
// Open the infowindow on marker click
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
return marker;
}
myMarkers['Bus 47'].setPosition(new google.maps.LatLng(newLat,newLng);
我没有测试上面的代码，因此可能会出现一些小的语法错误或其他问题，但这应该会让您有所了解。您想在获得标记的新位置时更改标记的位置吗？或者，您希望为标记设置动画，使其在地图上平滑滑动？当然，前者比后者容易。前者可行，但后者更可取。你想在得到一个新的标记位置时只更改标记的位置吗？或者，您希望为标记设置动画，使其在地图上平滑滑动？当然，前者比后者容易。前者可以工作，但后者更好。我仍然不确定如何使用设置位置来更新每个标记的位置。地图的所有标记都存储在我可以访问的数组中吗？你介意给我举个例子吗？好的，我把答案充实了很多。在非常大的一组标记上，这种方法仍然会导致一些问题，比如浏览器没有响应，最终崩溃。我们的一个客户有这个问题，他有很多设备通过GPS实时显示/更新，但过了一段时间，浏览器停止响应，然后崩溃。还没有找到解决方案。我仍然不确定如何使用setPosition更新每个标记的位置。地图的所有标记都存储在我可以访问的数组中吗？你介意给我举个例子吗？好的，我把答案充实了很多。在非常大的一组标记上，这种方法仍然会导致一些问题，比如浏览器没有响应，最终崩溃。我们的一个客户有这个问题，他有很多设备通过GPS实时显示/更新，但过了一段时间，浏览器停止响应，然后崩溃。我还没有找到解决办法。