如何在Google Maps API中移动标记

本文介绍了如何在Google Maps API中移动标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用Google Maps API V3，并试图在屏幕上移动标记。以下是我的：

 <！DOCTYPE html> 
< html> 
< head> 
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no/> 
< style type =text / css> 
 html {height：100％} 
 body {height：100％;保证金：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> 
函数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）; 
} 
 
函数moveBus（）
 {
 //移动总线
} 
 
< / script> 
< / head> 
 
< body onload =initialize（）> 
< script type =text / javascript> 
 moveBus（）; 
< / script> 
< div id =map_canvasstyle =height：500px; width：500px;>< / div> 
 
< / body> 
< / html>

现在我所尝试的是将// Bus Bus with

  marker.setPosition（new google.maps.LatLng（0,0））;

但是这并没有做任何事情。这是我在API参考中看到的命令。我也是比较新的Javascript，所以它可能是我的错误。

> moveBus（）在 initialize（）之前被调用。尝试将该行放在 initialize（）函数的末尾。另外纬度/经度0,0离开地图（它是坐标，而不是像素），所以当它移动时你看不到它。试试54,54。如果你想让地图的中心移动到新位置，使用 panTo（）。

演示：

HTML：
< script src =http://maps.googleapis.com/maps/api ？/ JS传感器=假>< /脚本> < 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）; 
 
 
 
函数moveBus（map，marker）{
 
 marker.setPosition（new google.maps.LatLng（0，0））; 
 map.panTo（new google.maps.LatLng（0，0））; 
 
}; 
 
 initialize（）;

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>

Now what I've tried is replacing // Move Bus with

marker.setPosition(new google.maps.LatLng(0,0));

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() 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().

Demo: 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;
}

Script:

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中移动标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！