Question

我有一组标记，当点击标记时，会有一个获取方向的按钮。问题是它只能从xml给出最后加载的标记的方向，而不是单独给每个标记。这是我的代码，也许有人可以告诉我我做错了什么。谢谢。

更新：工作代码，问题解答

var map;
var point;
var directionsDisplay; 
var directionsService;
var marker;
var myLatLng; 
var marklat;
var marklong;
var markers;
var DirLat;
var DirLng;

function loadGoogleMap(){
    // load google map
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
        'callback=MyMap';
    document.body.appendChild(script);
}


var map = ''

function MyMap(){

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

    var im = //user location icon 
    var CustomMarker = //marker icon location

    if(navigator.geolocation){

        navigator.geolocation.getCurrentPosition(locate, noPos());
    } else { 

    noPos();

    }

    function locate(position){

        myLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        var mapOptions = {
          zoom: 12,
          center: myLatLng,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          zoomControl: false,
          streetViewControl: false,
          mapTypeControl: false,
          panControlOptions: { position: google.maps.ControlPosition.TOP_RIGHT},
          zoomControlOptions: { position: google.maps.ControlPosition.TOP_RIGHT }
        }
        map = new google.maps.Map(document.getElementById('map-canvas'),
                                      mapOptions);
        var userMarker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: im
        });
    var infoWindow = new google.maps.InfoWindow;

        downloadUrl("phps/xmltest.php", function(data) {
        var xml = data.responseXML;         
         markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var nam = markers[i].getAttribute("name");
          var name = nam.replace('=', '\'');
          var address = markers[i].getAttribute("address");
          var dt1 = markers[i].getAttribute("date1");
          var dt2 = markers[i].getAttribute("date2");
          var dt3 = markers[i].getAttribute("date3");
          var tm1 = markers[i].getAttribute("time1");
          var tm2 = markers[i].getAttribute("time2");
          var tm3 = markers[i].getAttribute("time3");
          var pid = markers[i].getAttribute("PID");
      var DirLat = markers[i].getAttribute("lat");
      var DirLng = markers[i].getAttribute("lng");
      var d = Math.round(Math.random()*1679735965724*236896135089834);
      var raw = pid * d;
      //move up the creation of point
      point = new google.maps.LatLng(
              DirLat,
              DirLng);

      marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: CustomMarker,
        id: raw,
        id2: d

      }); 
      var content = "<button onclick='getDir();'>Get Directions</button>";
      var jshtml = "<button onclick='raw();'>More Info</button>"; //an href function that redirects
      var html = "<b>" + name + "&nbsp;" + content+ '&nbsp;' + jshtml+ "</b> <br/>" + "Date of Yard Sale: " + dt1 + '&nbsp;' + tm1 + '&nbsp;' + dt2 + '&nbsp;' + tm2 + '&nbsp;' + dt3 + '&nbsp;' + tm3;      
      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, html);
        center: position;

    document.getElementById('iLat').value = marker.getPosition().lat().toFixed(6);
    document.getElementById('iLng').value = marker.getPosition().lng().toFixed(6);
    document.getElementById('iRaw1').value = marker.id;
    document.getElementById('iRaw2').value = marker.id2;

      });
    }

    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();
    }
         function doNothing() {}
    }


    function noPos(error){

        var mapOptions = {
          zoom: 4,
          center: new google.maps.LatLng(41.850033, -87.6500523),
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          zoomControl: true,
          streetViewControl: false,
          mapTypeControl: false,
          panControlOptions: { position: google.maps.ControlPosition.TOP_RIGHT},
          zoomControlOptions: { position: google.maps.ControlPosition.TOP_RIGHT }
        }
        var map = new google.maps.Map(document.getElementById('map-canvas'),
                                      mapOptions);

    var infoWindow = new google.maps.InfoWindow;

      // Change this depending on the name of your PHP file
      downloadUrl("phps/xmltest.php", function(data) {
        var xml = data.responseXML;
         markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var nam = markers[i].getAttribute("name");
          var name = nam.replace('=', '\'');
          var address = markers[i].getAttribute("address");
          var dt1 = markers[i].getAttribute("date1");
          var dt2 = markers[i].getAttribute("date2");
          var dt3 = markers[i].getAttribute("date3");
          var tm1 = markers[i].getAttribute("time1");
          var tm2 = markers[i].getAttribute("time2");
          var tm3 = markers[i].getAttribute("time3");
          var pid = markers[i].getAttribute("PID");
          var d = Math.round(Math.random()*1679735965724*236896135089834);
          var raw = pid * d;
          var jshtml = "<button onclick='raw();'>More Info</button>";;
          var html = "<b>" + name + '&nbsp;' + jshtml + "</b>"  + "<br>" + "Date of Yard Sale: " + dt1 + '&nbsp;' + tm1 + '&nbsp;' + dt2 + '&nbsp;' + tm2 + '&nbsp;' + dt3 + '&nbsp;' + tm3;
          point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: CustomMarker,
            id: raw,
            id2: d
          });

          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, html);
        position = marker.position;
        center: position;

    document.getElementById('iRaw1').value = marker.id;
    document.getElementById('iRaw2').value = marker.id2;

      });
    }

    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 getDir(){
  directionsDisplay.setMap(map);

  var start = myLatLng;
  //LatLng created based on the passed arguments
  var end = point;
  var request = {
                  origin:start,
                  destination:end,
                  travelMode: google.maps.TravelMode.DRIVING 
                };
  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(result);  
    }
  }); 
}

Answer 1

我全局定义了方向所需的每个变量：

var map;
var point;
var directionsDisplay; 
var directionsService;
var marker;
var myLatLng; 
var marklat;
var marklong;
var markers;
var DirLat;
var DirLng;

为该函数创建了一个按钮，并设置在infowindow中可见的内容：

var content = "<button onclick='getDir();'>Get Directions</button>";

接下来，我在地图页面中创建了隐藏的输入字段，并为所单击的标记指定了纬度和经度值。

document.getElementById('iLat').value = marker.getPosition().lat().toFixed(6);
document.getElementById('iLng').value = marker.getPosition().lng().toFixed(6);

路线功能getDir为目的地提取这些值，myLatLng是用户的当前位置：

function getDir(){
  directionsDisplay.setMap(map);

  var start = myLatLng;
  var LatDir = document.getElementById('iLat').value;
  var LngDir = document.getElementById('iLng').value;
  var end = new google.maps.LatLng(LatDir,LngDir);

  var request = {
                  origin:myLatLng,
                  destination:new google.maps.LatLng(LatDir,LngDir),
                  travelMode: google.maps.TravelMode.DRIVING 
                };
  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(result);  
    }
  }); 
}

有关完整代码，请参阅更新后的问题代码。

Google方向错误标记

1 个答案: