javascript - 单击标记时数组中的目的地

Question

我对 javascript 不太有经验，但我希望比现在做得更好。我非常困于我正在从事的一个项目，非常需要帮助。

我正在制作一张 map ，其中的位置是从 Google 文档上的文件导出的数据集标记的。到目前为止，我已经成功地填充了 map 上的标记并设置了信息窗口。

我希望用户能够单击 map 上的标记，然后单击信息窗口中的“获取路线”按钮以获取从当前位置(使用地理位置)到他们所标记的位置的路线点击。

我觉得我已经很接近了(也许这就是问题所在)，但我不知道，经过几天的尝试仍然无法弄清楚如何将 lat,lng 从我的数组中获取到 getDir 函数中。如有任何帮助，我们将不胜感激。预先感谢您。

Here is the page上面有 map ，就像现在一样。

以下是我如何调用数据并将数据设置到 map 中 -

function initialize() {

   var myLatlng100 = new google.maps.LatLng(45.522535,-122.659492);
   var mapOptions = {
      center: myLatlng100,
      zoom: 15,          
      mapTypeControl: true,
      zoomControl: true,
      zoomControlOptions: {
         style: google.maps.ZoomControlStyle.SMALL
      }
   };
 map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

 var transitLayer = new google.maps.TransitLayer();
 transitLayer.setMap(map);

 $.getJSON('https://spreadsheets.google.com/feeds/list/0AnAPtHOSNeZvdHBpcU1NemZ5UFJaOXZDMXlBUVdnMWc/od6/public/values?alt=json',       
 function(data) {
   for (var i = 0; i < data.feed.entry.length; i++) {
      var markerId = data.feed.entry[i].gsx$markerid.$t;
      var lat = data.feed.entry[i].gsx$lat.$t;
      var lng = data.feed.entry[i].gsx$lng.$t;
      var title = data.feed.entry[i].gsx$name.$t;
      var contentString = 
         "<div class='contentString'><h3>" + data.feed.entry[i].gsx$name.$t + "</h3><br><p>" + data.feed.entry[i].gsx$address.$t 
          + "<br>" + data.feed.entry[i].gsx$city.$t + ", "
          + data.feed.entry[i].gsx$state.$t + "</p></div>" + "<input type='button' onClick=getDir() value='Get direction here'>";          


      var markers = [markerId, lat, lng, title, contentString];
      createMarker(lat, lng, title, contentString);

   }  
 });
}   

这是我的 getDir()，所有的麻烦都在这里 -

function getDir(lat,lng) {

  if (navigator.geolocation) { //Checks if browser supports geolocation          
      navigator.geolocation.getCurrentPosition(function (position) {  //This gets the
      var latitude = position.coords.latitude;                    //users current
      var longitude = position.coords.longitude;                 //location
      var start = new google.maps.LatLng(latitude,longitude); //Creates variable for map coordinates


    var directionsService = new google.maps.DirectionsService();
    var directionsDisplay = new google.maps.DirectionsRenderer();
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('panel'));


    var request = {
      origin: start,
      destination: new google.maps.LatLng(lat,lng),
      travelMode: google.maps.DirectionsTravelMode.WALKING
    };

    directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
           directionsDisplay.setDirections(response);
        }
    });
  });
  } else {
    // Browser doesn't support Geolocation
    handleNoGeolocation(false);
  }
}

Answer 1

将纬度和经度添加到信息窗口的 HTML 中。更改此:

  var lat = data.feed.entry[i].gsx$lat.$t;
  var lng = data.feed.entry[i].gsx$lng.$t;
  var contentString = 
     "<div class='contentString'><h3>" + data.feed.entry[i].gsx$name.$t + "</h3><br><p>" + data.feed.entry[i].gsx$address.$t 
      + "<br>" + data.feed.entry[i].gsx$city.$t + ", "
      + data.feed.entry[i].gsx$state.$t + "</p></div>" + "<input type='button' onClick=getDir() value='Get direction here'>";          

致:

  var lat = data.feed.entry[i].gsx$lat.$t;
  var lng = data.feed.entry[i].gsx$lng.$t;
  var contentString = 
     "<div class='contentString'><h3>" + data.feed.entry[i].gsx$name.$t + "</h3><br><p>" + data.feed.entry[i].gsx$address.$t 
      + "<br>" + data.feed.entry[i].gsx$city.$t + ", "
      + data.feed.entry[i].gsx$state.$t + "</p></div>" + "<input type='button' onClick=getDir("+lat+","+lng+") value='Get direction here'>";          

working fiddle