0

我使用谷歌 api 代码在我的页面中找到两个地方之间的方向，但我在地图上看不到这个方向。

当我在https://developers.google.com/maps/documentation/javascript/examples/directions-simple olan 中编写谷歌代码时，我可以看到当前结果，但此代码在我的页面代码中不起作用

这是我的代码：

var map;
var infoWindow;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
function load() {

    var noPOILabels = [
{ 
  featureType: "poi", 
  elementType: "labels", 
  stylers: [ { visibility: "off" } ] 

}
 ];
var noPOIMapType = new google.maps.StyledMapType(noPOILabels,
{name: "NO POI"});

directionsDisplay = new google.maps.DirectionsRenderer();

   map = new google.maps.Map(document.getElementById("mapdiv"), {
    center: new google.maps.LatLng(41.850033, -87.6500523),
    zoom: 13,
    mapTypeControlOptions: {
    mapTypeId: [google.maps.MapTypeId.ROADMAP,'no_poi']}

  });
   infoWindow = new google.maps.InfoWindow;

 map.mapTypes.set('no_poi', noPOIMapType);
 map.setMapTypeId('no_poi');

  google.maps.event.addListener(map, 'click', function( event ){ 
    //map.setMarker(null);
     document.save.lat.value = event.latLng.lat(); 
     document.save.lon.value = event.latLng.lng();
     node=new google.maps.LatLng(event.latLng.lat(),event.latLng.lng()); 
     var mark=new google.maps.Marker({
        map:map,
        position:node,
        icon:'http://google.com/mapfiles/ms/micons/ltblu-pushpin.png ',
        draggable:true,
        raiseOnDrag:true
        });
});

//var inparent=document.getElementById('searchtext');
var input=document.getElementById('search');
var searchbox=new google.maps.places.SearchBox(input);
var pointer=[];

google.maps.event.addListener(searchbox,'places_changed',function(){
    var areas=searchbox.getPlaces();
    var bounds = new google.maps.LatLngBounds();

    for(var i=0,point;point=pointer[i];i++){
        pointer.setMap(null);
    }
    pointer=[];
    for(var i=0,area;area=areas[i];i++){
    var point=new google.maps.Marker({
        map:map,
        position:area.geometry.location,
        icon:'http://google.com/mapfiles/ms/micons/pink-pushpin.png',
        //title:area.name
        });

pointer.push(point);
bounds.extend(area.geometry.location);
 }
    map.fitBounds(bounds);
});

google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchbox.setBounds(bounds);
 });
  directionsDisplay.setMap(map);
 //requieUrl = 'phpsqlajax_search.php?lat=' + map.getCenter().lat() + '&lng=' + map.getCenter().lng();
}
 function seticon(divid) {
giveid=divid.id;

     // alert(map.getCenter().lat());
     requieUrl = 'phpsqlajax_genxml.php?lat=' + map.getCenter().lat() + '&lng=' + map.getCenter().lng();
     downloadUrl(requieUrl, function(data) {
        var xml = data.responseXML;
    var location = xml.documentElement.getElementsByTagName("place");
     for (var i = 0; i < location.length; i++) {
      var id = location[i].getAttribute("place_id");    
      var name = location[i].getAttribute("p_name");
      var address =location[i].getAttribute("addr");
      var phone = location[i].getAttribute("tel");
      var type = location[i].getAttribute("category");
      var desc = location[i].getAttribute("description");
      var point = new google.maps.LatLng(
          parseFloat(location[i].getAttribute("lat")),
          parseFloat(location[i].getAttribute("lng")));
      var html = "<b>" + name + "</b> <br/> <b>" + address + "</b> <br/> <b>" + type + "</b> <br/> <b>" + phone;
      var icon = iconcustom[type];
      if(type==giveid){
        var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon
        });
     bindInfoWindow(marker, map, infoWindow, html);
      }
      }

 });
}

function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
}

function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}

function doNothing() {}

function calcRoute(){
    var start = document.getElementById('start').value;
    var end = document.getElementById('end').value;

        var request={
            origin: start,
            destination:end,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };

         directionsService.route(request, function(response, status) {  
if (status == google.maps.DirectionsStatus.OK) {
  directionsDisplay.setDirections(response);
}
  });
 }

我使用两个输入从用户那里获取坐标，并通过这个 lat&lng 设置起点和终点。但我得到了萤火虫未定义变量的错误。我的函数 calcRoute() 更改为

 function getroute(){

        var latitude1=document.getElementById('l1').value;
        var longitude1=document.getElementById('ln1').value;
        var latitude2=document.getElementById('l2').value;
        var longitude2=document.getElementById('ln2').value;
        var start=new google.maps.LatLng(latitude1,longitude1);
        var end=new google.maps.LatLng(latitude2,longitude2);
        var request={
            origin: start,
            destination:end,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };

         directionsService.route(request, function(response, status) {  
if (status == google.maps.DirectionsStatus.OK) {
  directionsDisplay.setDirections(response);
}

此函数在输入元素中调用。

4

0 回答 0