文章/答案/技术大牛

发布

社区首页 >问答首页 >获取方向接口v3

问获取方向接口v3
EN

Stack Overflow用户

提问于 2014-07-06 23:06:02

回答 1查看 116关注 0票数 0

我已经在我的谷歌地图上实现了一些选项，但我在获取方向部分遇到了麻烦。我已经阅读了许多答案，并以多种方式实现，但仍然不能弄清楚哪里出了问题。希望你能帮助我：

我试图获得方向从:用户的位置(使用地理位置)，到:一个点击的地方。

我已经正确地实现了上面的所有内容，但我的方向代码有问题：

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();

function initialize()
{
directionsDisplay = new google.maps.DirectionsRenderer();
//some styles
var mapProp = {
//disableDefaultUI:true,    
zoom:14,
mapTypeControlOptions: {
  mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
 },
scrollwheel: false,
zoomControl: true,
zoomControlOptions: {/*zoom on the left*/
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.RIGHT_CENTER
            }
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
 directionsDisplay.setMap(map);
var destinationmarker;

function placeMarker(destination) {
if ( destinationmarker ) {
destinationmarker.setPosition(destination);
} else {
destinationmarker = new google.maps.Marker({
  position: destination,
  map: map
});

}
$("#end").val(destination.lat()+","+destination.lng());

}

google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);

});
// some markers from db
//below is the location of the user with a marker
var marker=new google.maps.Marker({
position: pos,
animation:google.maps.Animation.BOUNCE,
icon:'ktuugeo.png',
});

marker.setMap(map); 

$("#start").val(pos.lat()+","+pos.lng());
google.maps.event.addListener(marker);

//supposedly the route function, set to execute on change
function calcRoute() {
var start = document.getElementById("start").value;
var final = document.getElementById("end").value;
var request = {
  origin: start,
  destination: final,
  travelMode: google.maps.TravelMode.WALKING
 };
 directionsService.route(request, function(response, status) {
 if (status == google.maps.DirectionsStatus.OK) {
  directionsDisplay.setDirections(response);
 }
 });
 }
 google.maps.event.addDomListener(window, 'load', initialize);

<body><div id="googleMap"></div>
<div id="dire" >
<textarea cols="20" rows="5" id="start" name="start"></textarea>
<textarea cols="20" rows="3" id="end" name="end" onchange="calcRoute();"></textarea>
</div>
</body>

我想这就是全部。我跳过了一些不受影响的部分

html

google-maps

javascript

jquery

回答 1

Stack Overflow用户

发布于 2014-07-06 23:19:20

好吧，我不能保证这是唯一需要修复的细节，但至少我可以告诉您，calcRoute期望对象作为源和目标。你在喂它一根绳子。

如果您已经知道pos和destination的值(您用它们来绘制这两个标记)，那么请再次使用它们，而不是将位置作为字符串存储在DOM元素中。

function calcRoute(pos,destination) {
    var request = {
        origin: pos,
        destination: destination,
        travelMode: google.maps.TravelMode.WALKING
    };
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
            directionsDisplay.setMap(map);
        }
    });
}

编辑:我错过了directionsDisplay映射属性的设置。

在这里，我给您留下了一个可用的示例：http://bl.ocks.org/amenadiel/acad781594f9976839c3

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/24597210

复制

相似问题

问获取方向接口v3
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问获取方向接口v3EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问获取方向接口v3
EN