标记位置不被拾取-谷歌地图API v3
Marker Position not being picked up - Google Maps API v3
所以我试图找到2个标记之间的距离。在代码中,我在左键点击上放置了一个标记,并将标记的位置保存为变量"start"。然后,我在左键单击时放置第二个标记,并将该标记的位置保存到变量末端。然后,我调用一个函数来计算标记之间的距离,但似乎getPosition()函数没有以正确的格式拾取LatLng。我有点困惑,为什么它不会工作。
代码如下所示。任何帮助都将非常感激。由于
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var start;
var end;
var markersArray = [];
var originPlace = new google.maps.LatLng(0,0);
var destinationPlace = new google.maps.LatLng(0,0);
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var mapOptions = {
zoom:7,
center: chicago
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
google.maps.event.addListener(map,'click',function(event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
if (markersArray.length == 0) {
marker = new google.maps.Marker({
position: location,
map: map,
title: location.toString()
});
// add marker in markers array
markersArray.push(marker);
start = marker.getPosition();
alert(start);
}
else if(markersArray.length == 1)
{
marker = new google.maps.Marker({
position: location,
map: map,
title: location.toString()
});
// add marker in markers array
markersArray.push(marker);
end = marker.getPosition();
calcRoute(start, end);
}
else
{
}
}
function calcRoute(start, end) {
originPlace = new google.maps.LatLng(start);
destinationPlace = new google.maps.LatLng(end);
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix(
{
origins: [originPlace],
destinations: [destinationPlace],
travelMode: google.maps.TravelMode.DRIVING
}, callback);
}
function callback(response, status) {
if (status != google.maps.DistanceMatrixStatus.OK) {
alert('Error was: ' + status);
} else {
var origins = response.originAddresses;
var destinations = response.destinationAddresses;
var outputDiv = document.getElementById('outputDiv');
outputDiv.innerHTML = '';
for (var i = 0; i < origins.length; i++) {
var results = response.rows[i].elements;
for (var j = 0; j < results.length; j++) {
outputDiv.innerHTML += origins[i] + ' to ' + destinations[j]
+ ': ' + results[j].distance.text + ' in '
+ results[j].duration.text + '<br>';
}
}
}
}
google.maps.event.addDomListener(window, 'load', initialize);
两点。首先,开始和结束都要这样做:
marker = new google.maps.Marker({
position: location,
map: map,
title: location.toString()
});
start = marker.getPosition();
为什么不使用你已经知道的location
值,而不是调用getPosition()?
start = location
其次,开始和结束的值是LatLng对象,这是Marker类的getPosition()函数返回的值。
在你的calcRoute函数中,你试图从它们创建LatLng对象,这将不起作用:
originPlace = new google.maps.LatLng(start);
destinationPlace = new google.maps.LatLng(end);
这个应该是:
originPlace = start;
destinationPlace = end;
Update:在构建request
对象时,还可以进一步将originPlace和destinationPlace放在数组中,这会导致您在评论中提到的错误。这是我使用的为我工作的代码。
function placeMarker(location) {
if (markersArray.length == 0) {
marker = new google.maps.Marker({
position: location,
map: map,
title: location.toString()
});
// add marker in markers array
markersArray.push(marker);
start = location;
} else if (markersArray.length == 1) {
marker = new google.maps.Marker({
position: location,
map: map,
title: location.toString()
});
// add marker in markers array
markersArray.push(marker);
end = location;
calcRoute(start, end);
}
}
function calcRoute(start, end) {
originPlace = start;
destinationPlace = end;
var request = {
origin: originPlace, // NOTICE THIS ONE ISN'T IN AN ARRAY...
destination: destinationPlace,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix({
origins: [originPlace], // ... BUT THIS ONE STILL IS
destinations: [destinationPlace],
travelMode: google.maps.TravelMode.DRIVING
}, callback);
}
相关文章:
- 谷歌地图API v3不适用于移动浏览器或PhoneGap
- 标记的实时更新,无需加载页面谷歌地图API V3
- 覆盖在赢得'不允许点击下面的标记,谷歌地图api v3
- 谷歌地图Api和JS代码不工作
- 谷歌地图API-InfoBubble赢得't关闭-关闭()不会'不起作用
- 如何在多承诺链中处理谷歌地图API V3事件
- 谷歌地图api和gMapsLatLonPicker
- 谷歌地图API-“;toGeoJson”;返回几何体为null的对象
- 谷歌地图API v3:Initial View is Fine,but Gray Box with No Map if
- 为什么谷歌地图API's方法未从RequireJS中正确调用
- 使用谷歌地图api计算距离并将其设置在表格中<td>
- 使用谷歌地图API和phonegap显示当前位置+方向
- 使用谷歌地图api v3自动完成字段(法国大道、邮编、城市)
- 谷歌地图API标记没有标记我的位置
- 使用谷歌地图api 3为MapTypeId.TERRAIN分离按钮
- 在JQuery中使用谷歌地图Api事件/侦听器
- 在Ionic应用程序上使用$.getScript加载谷歌地图Api
- 我该如何解决“;未捕获引用错误:谷歌没有定义"?(谷歌地图API)
- 谷歌地图API-显示具有不同图标的标记
- 如何停止地图移动时,鼠标悬停在标记在谷歌地图API 3