Question

我对javascript不是很有经验，但我想比现在好。我非常依赖我正在进行的项目并且需要帮助很严重。

我正在创建一个地图，其中包含从Google文档中的文件导出的数据集中标记的位置。到目前为止，我已设法填充地图上的标记并设置infowindows。

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

我觉得我很接近（也许这就是问题），但我不知道，经过几天的尝试仍然无法弄明白，如何从我的数组中获取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);
  }
}

Answer 1

将纬度和经度添加到infowindow中的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

标记点击时数组的目的地

1 个答案: