如何在 Google Maps API 中移动标记
Posted
技术标签:
【中文标题】如何在 Google Maps API 中移动标记【英文标题】：How to move a marker in Google Maps API 【发布时间】：2011-12-22 21:53:26 【问题描述】：我正在使用 Google Maps API V3，我正在尝试让标记在屏幕上移动。这是我所拥有的：
<!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 替换为
marker.setPosition(new google.maps.LatLng(0,0));
但这并没有做任何事情。这是我在 API 参考上看到的命令。我对 Javascript 也比较陌生，所以这可能是我的一个 JS 错误。
【问题讨论】：
【参考方案1】：您使用的是正确的 API，但“标记”变量对整个脚本可见。我没有看到全局声明的这个标记变量。
【讨论】：
根据w3schools.com/js/js_variables.asp 为未声明的变量赋值使它们成为全局变量。【参考方案2】：moveBus() 在initialize() 之前被调用。尝试将该行放在 initialize() 函数的末尾。 Lat/Lon 0,0 也在地图之外（它是坐标，而不是像素），所以当它移动时你看不到它。试试 54,54。如果您希望地图中心移动到新位置，请使用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();
【讨论】：
这可能是一个愚蠢的问题，但为什么在我的代码中在 initialize() 之前调用 moveBus()？ onload 脚本不会在正文中的任何内容之前发生吗？ 您的 moveBus() 调用不在 onload 块中，只是正文中的脚本块。它一被读取就会被解析。你可以这样做：window.onload = function() moveBus(); ; 你能帮我看看如何在不添加新地图但将标记移动到现有地图的情况下做到这一点吗？ 这不起作用或效率不高。请参阅下面的可拖动解决方案：true【参考方案3】：使用 panTo(x,y)。这将帮助你
【讨论】：
【参考方案4】：<style>
#frame
position: fixed;
top: 5%;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 6px #B2B2B2;
display: inline-block;
padding: 8px 8px;
width: 98%;
height: 92%;
display: none;
z-index: 1000;
#map
position: fixed;
display: inline-block;
width: 99%;
height: 93%;
display: none;
z-index: 1000;
#loading
position: fixed;
top: 50%;
left: 50%;
opacity: 1!important;
margin-top: -100px;
margin-left: -150px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 6px #B2B2B2;
display: inline-block;
padding: 8px 8px;
max-width: 66%;
display: none;
color: #000;
#mytitle
color: #FFF;
background-image: linear-gradient(to bottom,#d67631,#d67631);
// border-color: rgba(47, 164, 35, 1);
width: 100%;
cursor: move;
#closex
display: block;
float:right;
position:relative;
top:-10px;
right: -10px;
height: 20px;
cursor: pointer;
.pointer
cursor: pointer !important;
</style>
<div id="loading">
<i class="fa fa-circle-o-notch fa-spin fa-2x"></i>
Loading...
</div>
<div id="frame">
<div id="headerx"></div>
<div id="map" >
</div>
</div>
<?php
$url = Yii::app()->baseUrl . '/reports/reports/transponderdetails';
?>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function clode()
$('#frame').hide();
$('#frame').html();
function track(id)
$('#loading').show();
$('#loading').parent().css("opacity", '0.7');
$.ajax(
type: "POST",
url: '<?php echo $url; ?>',
data: 'id': id,
success: function(data)
$('#frame').show();
$('#headerx').html(data);
$('#loading').parents().css("opacity", '1');
$('#loading').hide();
var thelat = parseFloat($('#lat').text());
var long = parseFloat($('#long').text());
$('#map').show();
var lat = thelat;
var lng = long;
var orlat=thelat;
var orlong=long;
//Intialize the Path Array
var path = new google.maps.MVCArray();
var service = new google.maps.DirectionsService();
var myLatLng = new google.maps.LatLng(lat, lng), myOptions = zoom: 4, center: myLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP;
var map = new google.maps.Map(document.getElementById('map'), myOptions);
var poly = new google.maps.Polyline(map: map, strokeColor: '#4986E7');
var marker = new google.maps.Marker(position: myLatLng, map: map);
function initialize()
marker.setMap(map);
movepointer(map, marker);
var drawingManager = new google.maps.drawing.DrawingManager();
drawingManager.setMap(map);
function movepointer(map, marker)
marker.setPosition(new google.maps.LatLng(lat, lng));
map.panTo(new google.maps.LatLng(lat, lng));
var src = myLatLng;//start point
var des = myLatLng;// should be the destination
path.push(src);
poly.setPath(path);
service.route(
origin: src,
destination: des,
travelMode: google.maps.DirectionsTravelMode.DRIVING
, function(result, status)
if (status == google.maps.DirectionsStatus.OK)
for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++)
path.push(result.routes[0].overview_path[i]);
);
;
// function()
setInterval(function()
lat = Math.random() + orlat;
lng = Math.random() + orlong;
console.log(lat + "-" + lng);
myLatLng = new google.maps.LatLng(lat, lng);
movepointer(map, marker);
, 1000);
,
error: function()
$('#frame').html('Sorry, no details found');
,
);
return false;
$(function()
$("#frame").draggable();
);
</script>
【讨论】：
【参考方案5】：只需尝试创建标记并将可拖动属性设置为true。
代码如下：
Marker = new google.maps.Marker(
position: latlon,
map: map,
draggable: true,
title: "Drag me!"
);
我希望这会有所帮助！
【讨论】：
【参考方案6】：这是没有错误的完整代码
<!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%
#map-canvas
height: 400px;
width: 500px;
</style>
</script>
<script type="text/javascript">
function initialize()
var myLatLng = new google.maps.LatLng( 17.3850, 78.4867 ),
myOptions =
zoom: 5,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
,
map = new google.maps.Map( document.getElementById( 'map-canvas' ), myOptions ),
marker = new google.maps.Marker( icon:
url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
// This marker is 20 pixels wide by 32 pixels high.
size: new google.maps.Size(20, 32),
// The origin for this image is (0, 0).
origin: new google.maps.Point(0, 0),
// The anchor for this image is the base of the flagpole at (0, 32).
anchor: new google.maps.Point(0, 32)
, position: myLatLng, map: map );
marker.setMap( map );
moveBus( map, marker );
function moveBus( map, marker )
setTimeout(() =>
marker.setPosition( new google.maps.LatLng( 12.3850, 77.4867 ) );
map.panTo( new google.maps.LatLng( 17.3850, 78.4867 ) );
, 1000)
;
</script>
</head>
<body onload="initialize()">
<script type="text/javascript">
//moveBus();
</script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=AIzaSyB-W_sLy7VzaQNdckkY4V5r980wDR9ldP4"></script>
<div id="map-canvas" style="height: 500px; width: 500px;"></div>
</body>
</html>
【讨论】：
以上是关于如何在 Google Maps API 中移动标记的主要内容，如果未能解决你的问题，请参考以下文章
google maps js v3 api教程 -- 在地图上添加标记
如何使用 JavaScript 在 Google Maps API 中仅获取一个标记
Google Maps Api v3：如何更改方向（设置）面板中的默认航点标记？