标记单击时数组中的目标答案

【问题标题】：Destination from array on marker click标记单击时数组中的目标
【发布时间】：2014-08-19 04:00:07
【问题描述】：

我对 javascript 不是很有经验，但我想比现在更好。我非常坚持我正在从事的项目并且非常需要帮助。

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

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

我觉得我很接近（也许这就是问题所在），但我不知道，经过几天的尝试仍然无法弄清楚如何将 lat,lng 从我的数组中获取到 getDir 函数中.请，任何帮助表示赞赏。提前谢谢你。

Here is the page 上面有现在的地图。

这是我如何调用并将数据设置到地图中 -

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);
  }
}

【问题讨论】：

标签： javascript google-maps google-maps-api-3

【解决方案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

【讨论】：