谷歌地圖開發人員去特定的位置

Question

我正在開發一個應用程序，告訴用戶他可以去的最佳選擇。爲此，我使用谷歌地圖技術。

我目前所做的是這樣的：

1. 顯示用戶自己的當前位置
2. 顯示用戶的可能性，在那裏他可以去（有標記和信息窗口）
3. 最後名單在地圖下方標註地圖上標記的每個標記的位置名稱。

現在附近有一個按鈕調用請參閱位置，我希望當用戶點擊按鈕時，它會指示他到那個特定標記並打開信息選項卡。

目前我的代碼由以下部分組成：

map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions); 

     var marker = new google.maps.Marker({ 
      position: CurrentLoc, 
      map: map 
     }); 

     document.getElementById('LocationList').innerHTML = ''; 

     var request = { 
      location: CurrentLoc, 
      radius: '2000', 
      types: ['park'] 
     }; 

     var service = new google.maps.places.PlacesService(map); 
     service.nearbySearch(request, callback); 

    function callback(results, status) { 

     if (status == google.maps.places.PlacesServiceStatus.OK) { 

      clearOverlays(); 
      htmlSugLoc = '<ul id="List" class="List ui-listview" data-role="listview">'; 

      for (var i = 0; i < results.length; i++) { 
       var place = results[i]; 
       createMarker(results[i],i); 
      } 

      htmlSugLoc += '</ul>'; 
      document.getElementById('LocationList').innerHTML = htmlSugLoc; 

     } 
     else { 
      clearOverlays(); 

      document.getElementById('LocationList').innerHTML = "<p>No Suitable Locations were found</p>"; 

      //alert('No Locations were found'); 
     } 
    } 


     function createMarker(place,selectID) { 

     var placeLoc = place.geometry.location; 
     var imageStar = "images/star.png"; 

     var marker = new google.maps.Marker({ 
      map: map, 
      icon: imageStar, 
      position: place.geometry.location 
     }); 

     var infowindow = new google.maps.InfoWindow(); 
      google.maps.event.addListener(marker, 'click', function() { 
      infowindow.setContent(place.name); 
      infowindow.open(map, this); 
     }); 

     markersArray.push(marker); 

     var odd = selectID % 2; 
     if (odd == true) { 
      htmlSugLoc += '<li style="background-color:#CCCCCC;" class="ui-li ui-li-static ui-btn-up-c ui-first-child">'; 
     } 
     else { 
      htmlSugLoc += '<li style="background-color:#E6E6E6;" class="ui-li ui-li-static ui-btn-up-c ui-first-child">'; 
     } 

     htmlSugLoc += place.name; 

     htmlSugLoc += '<div class="ViewLocation" style="float:right;margin-right:10px;margin-top:-5px;">'; 
     htmlSugLoc += '<input id="Meet'+selectID+'" type="hidden" value="'+placeLoc+'"/>'; 
     htmlSugLoc += '<a id="'+selectID+'" href="#" onclick="SeeMeetLocation(this.id);return false;"><img src="images/SeeLocation.png" width="100%" height="100%"/></a>'; 
     htmlSugLoc += '</div>'; 

     htmlSugLoc += '</li>'; 

    } 

    // Removes the overlays from the map, but keeps them in the array 
    function clearOverlays() { 
     if (markersArray) { 
     for (i in markersArray) { 
      markersArray[i].setMap(null); 
     } 
     } 
    } 

function SeeMeetLocation(VariableID) { 

    var InputID = ""; 
    var Placelocation = ""; 

    InputID = "Meet"+VariableID; 


    Placelocation = document.getElementById(InputID).value; 
} 

而且，正如你所看到的半徑，現在是固定的2000年是否有可能，而不是使用半徑，我用的是鎮/地點名稱例如曼徹斯特，巴勒莫等，這樣它將只覆蓋那個位置。事情是用戶的CurrentLoc（位置）總是改變。

我最後一個問題是我能以某種方式向他展示他與所選標記之間的距離。

感謝

基思Spiteri的

Answer 1

在SeeMeetLocation你需要trigger在那個特定的標記Click事件。您可能還想同時將地圖放在標記上。您可能需要通過您的電話SeeMeetLocation來通過某項指示標記。

onclick="SeeMeetLocation(this.id, ' + markersArray.length-1 + '); 

然後：

function SeeMeetLocation(VariableID, marker) { 
    google.maps.event.trigger(markersArray[marker], 'click'); 
    map.setCenter(markersArray[marker].getPosition()); 

最後，計算兩個點之間的距離使用geometry library，你可以嘗試這樣的：

function calculateDistances(start,end) { 
    var distances = {}; 

    distances.metres = google.maps.geometry.spherical.computeDistanceBetween(start, end); 
    distances.km = Math.round(distances.metres/1000 *10)/10; 
    distances.miles = Math.round(distances.metres/1000 * 0.6214 *10)/10; 

    return distances ; 
} 

確保並添加libraries=geometry參數時加載在API中。