Javascript 如何在 Google Maps API 中移动标记
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8024784/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to move a marker in Google Maps API
提问by gsingh2011
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:
我正在使用 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>
Now what I've tried is replacing // Move Bus with
现在我尝试的是将 // Move Bus 替换为
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.
但这没有任何作用。这是我在 API 参考中看到的命令。我对 Javascript 也比较陌生，所以这可能是我的 JS 错误。
回答by ThinkingStiff
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().
moveBus()之前被调用initialize()。尝试将该行放在initialize()函数的末尾。此外，纬度/经度 0,0 不在地图上（它是坐标，而不是像素），因此在移动时您看不到它。试试 54,54。如果您希望地图中心移动到新位置，请使用panTo()。
Demo: http://jsfiddle.net/ThinkingStiff/Rsp22/
演示：http: //jsfiddle.net/ThinkingStiff/Rsp22/
HTML:
HTML：
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map-canvas"></div>
CSS:
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();
回答by Maen Hasan
Just try to create the marker and set the draggable property to true.
The code will be something as follows:
只需尝试创建标记并将可拖动属性设置为true. 代码如下：
Marker = new google.maps.Marker({
position: latlon,
map: map,
draggable: true,
title: "Drag me!"
});
I hope this helps!
我希望这有帮助！
回答by Ajith Tolroy
Here is the full code with no errors
这是没有错误的完整代码
<!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>
回答by kimoduor
<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>
回答by Muthu
You are using the correct API, but is the "marker" variable visible to the entire script. I don't see this marker variable declared globally.
您使用的是正确的 API，但是“标记”变量对整个脚本可见。我没有看到全局声明的这个标记变量。
回答by user1884506
use panTo(x,y).This will help u
使用 panTo(x,y)。这将帮助你
