Fatal编程技术网

Javascript 获取方向API v3

javascript jquery html google-maps

Javascript 获取方向API v3,javascript,jquery,html,google-maps,Javascript,Jquery,Html,Google Maps,我已经在我的谷歌地图上实现了一些选项，但我在获取方向部分遇到了麻烦。我已经阅读了许多答案，并以多种方式实现了这些答案，但仍然无法找出问题所在。希望你能帮助我： 我试图通过地理定位从：用户的位置到：一个点击的地方 我已经正确地实现了上述所有功能，但我的方向代码有问题： var directionsDisplay; var directionsService = new google.maps.DirectionsService(); function initialize() { directi

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

我试图通过地理定位从：用户的位置到：一个点击的地方

我已经正确地实现了上述所有功能，但我的方向代码有问题：

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>
我猜就这些。我跳过了一些不影响的部分，我不能保证这是唯一要修复的细节，但至少我可以告诉你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贴图属性

在这里，我给您留下了一个工作示例：

问题是坐标是以xx.xxxx，yy.yyy的方式存储的。包括括号。我想这是一个问题，这就是为什么我必须将它存储在另一个变量和过滤器中。如果是这样的话，那么原点标记和目标标记都不会显示。它们在显示吗？顺便问一下，我需要做一些与谷歌Api控制台相关的事情吗？不，你没有做任何涉及身份验证的事情。我理解。事实上，这是我第一次尝试，但什么也没发生，就像你写的那样。我只是再试了一次，还没有结果。是的，这两个标记都出现在地图上