2016-11-19 74 views
2

谷歌地圖API文件中的字段我使用的是最新的谷歌地圖API v3和努力實現以下目標:與地方-ID

  1. 地圖中心用戶在移動設備上加載頁面。我在下面的代碼中工作。

  2. 用戶從地圖上點擊/觸摸POI並查看信息窗口的功能。這也是因爲它的谷歌地圖的基本功能。

  3. 這是我被難倒了。我需要能夠從信息窗口的第一個字段和第二個字段的Place-ID填充兩個字段的POI名稱。

這是我到目前爲止已經發現: https://developers.google.com/maps/documentation/javascript/examples/places-placeid-finder

此鏈接允許的地方搜索和填充,標記產生信息窗口與搜索到的位置的地方-ID。但是,如果您單擊標記外的任何POI,則不會有Place_ID。

其他密切的解決方案: Get placeId on google maps when POI is clicked

該解決方案可以讓你點擊看到的地方-ID,但有2個主要問題。首先,與上述第一個鏈接相同的POI爲完全相同的位置生成與此解決方案不同的Place-ID。此外,無論POI是否靠近,它都會爲地圖上的任意點生成Place-ID。

這裏是我的代碼迄今:

function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: -34.397, lng: 150.644}, 
     zoom: 17, 
     streetViewControl: false, 
     mapTypeControl: false 
    }); 
    var infoWindow = new google.maps.InfoWindow({map: map}); 

    // Try HTML5 geolocation. 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function(position) { 
     var pos = { 
      lat: position.coords.latitude, 
      lng: position.coords.longitude 
     }; 

     infoWindow.setPosition(pos); 
     infoWindow.setContent('Location found.'); 
     map.setCenter(pos); 
     }, function() { 
     handleLocationError(true, infoWindow, map.getCenter()); 
     }); 
    } else { 
     // Browser doesn't support Geolocation 
     handleLocationError(false, infoWindow, map.getCenter()); 
    } 
    } 

    function handleLocationError(browserHasGeolocation, infoWindow, pos) { 
    infoWindow.setPosition(pos); 
    infoWindow.setContent(browserHasGeolocation ? 
          'Error: The Geolocation service failed.' : 
          'Error: Your browser doesn\'t support geolocation.'); 
    } 

我將不勝感激,可能的原因的地方,ID是這些方法和可能的解決方案,從得到真正地-ID之間總是不同被有何啓示點擊事件。謝謝!

回答

1

您可以在地圖上聆聽點擊事件。如果您點擊POI圖標,IconMouseEvent將被擡起。

根據文檔:

google.maps.IconMouseEvent對象規範

當用戶點擊地圖上的圖標這個目的是在一個事件發送。該地點的地點ID存儲在placeId成員中。爲防止顯示默認信息窗口,請在此事件上調用stop()方法以防止它傳播。在Places API開發人員指南中瞭解更多有關地點ID的信息。

此對象擴展MouseEvent。

請看看這個示例代碼,找出如何使用事件與地點ID:

http://jsbin.com/parapex/10/edit?html,output

希望它能幫助!

+0

這正是我所需要的!謝謝。我添加了我需要填充的4個字段,它可以工作。 https://jsbin.com/nuxadi/edit?html,output我現在要做的就是取消2 POI功能之間的方向。 –