如何在 Google Maps API 中移动标记 [英] How to move a marker in Google Maps API
问题描述
我正在使用 Google Maps API V3，并且正在尝试使标记在屏幕上移动.这是我所拥有的:
I'm using the Google Maps API V3 and I'm trying to make a marker move across the screen. Here's what I have:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(50,50);
var myOptions = {
zoom: 4,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
image = 'bus.gif';
marker = new google.maps.Marker({position: myLatLng, map: map, icon: image});
marker.setMap(map);
}
function moveBus()
{
// Move Bus
}
</script>
</head>
<body onload="initialize()">
<script type="text/javascript">
moveBus();
</script>
<div id="map_canvas" style="height: 500px; width: 500px;"></div>
</body>
</html>
现在我尝试的是将//Move Bus 替换为
Now what I've tried is replacing // Move Bus with
marker.setPosition(new google.maps.LatLng(0,0));
但这并没有起到任何作用.这是我在 API 参考中看到的命令.我对 Javascript 也比较陌生，所以这可能是我的一个 JS 错误.
But that didn't do anything. That's the command I saw on the API reference. I'm also relatively new to Javascript, so it might be a JS error on my part.
推荐答案
moveBus() 在 initialize() 之前被调用.尝试将该行放在 initialize() 函数的末尾.此外，纬度/经度 0,0 不在地图上(它是坐标，而不是像素)，因此在移动时您看不到它.试试 54,54.如果您希望地图的中心移动到新位置，请使用 panTo().
moveBus() is getting called before initialize(). Try putting that line at the end of your initialize() function. Also Lat/Lon 0,0 is off the map (it's coordinates, not pixels), so you can't see it when it moves. Try 54,54. If you want the center of the map to move to the new location, use panTo().
演示:http://jsfiddle.net/ThinkingStiff/Rsp22/
HTML:
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map-canvas"></div>
CSS:
#map-canvas
{
height: 400px;
width: 500px;
}
脚本:
function initialize() {
var myLatLng = new google.maps.LatLng( 50, 50 ),
myOptions = {
zoom: 4,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
map = new google.maps.Map( document.getElementById( 'map-canvas' ), myOptions ),
marker = new google.maps.Marker( {position: myLatLng, map: map} );
marker.setMap( map );
moveBus( map, marker );
}
function moveBus( map, marker ) {
marker.setPosition( new google.maps.LatLng( 0, 0 ) );
map.panTo( new google.maps.LatLng( 0, 0 ) );
};
initialize();
这篇关于如何在 Google Maps API 中移动标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
