2014-11-08 128 views
-1

我想要做的就是使用google api獲取用戶在地圖上觸摸的點的地理位置。您如何獲得Google地圖上某個點的地理位置?

所有我只是基本的HTML:

<!DOCTYPE html> 
<html> 
    <head> 
    <style type="text/css"> 
     html, body, #map-canvas { height: 100%; margin: 0; padding: 0;} 
    </style> 
    <script type="text/javascript" 
     src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA86_aRT8-Gh0fCGcAYCq24UtqLvKAFYAY"> 
    </script> 
    <script type="text/javascript"> 
     function initialize() { 
     var mapOptions = { 
      center: { lat: 52.9507709, lng: -1.1746545}, 
      zoom: 20, 
     }; 
     var map = new google.maps.Map(document.getElementById('map-canvas'), 
      mapOptions); 
     } 
     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    </head> 
    <body> 
<div id="map-canvas"></div> 
    </body> 
</html> 

問候

+0

你能快速提琴嗎? – Amy 2014-11-08 04:34:26

回答

1

您是否嘗試過任何解決方案或在其他地方查找了回答的問題?這裏有一個例子:Capture Coordinates in Google Map on User Click

此外,從谷歌的文檔:

谷歌地圖API V3中的UI事件通常會傳送事件 參數,它可以通過事件監聽器訪問,注意UI 表示事件發生時的狀態。例如,UI「點擊」事件 通常會傳遞一個MouseEvent,其中包含一個latLng屬性,表示在地圖上點擊的位置爲 。請注意,此行爲對於 UI事件是唯一的; MVC狀態更改不會在其事件中傳遞參數。

您可以在事件偵聽器中訪問事件的參數,方法與訪問對象的屬性相同。以下示例 爲地圖添加了事件偵聽器,並在用戶點擊地圖上的用戶 時創建了標記。

var map; 
function initialize() { 
    var myLatlng = new google.maps.LatLng(-25.363882,131.044922); 
    var mapOptions = { 
    zoom: 4, 
    center: myLatlng 
    } 
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 

    google.maps.event.addListener(map, 'click', function(event) { 
    placeMarker(event.latLng); 
    }); 
} 

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

    map.setCenter(location); 
} 

在項目中使用設立的jsfiddle或東西,讓人們看到示例代碼。

2

Google Developers JavaScript API v3

添加事件監聽器監聽地圖click事件 - 該事件隨後傳遞了一個function,其中包含與點擊地圖上的location有關的信息。在這個例子中,標記被放置在每個用戶點擊地圖的位置。

google.maps.event.addListener(map, 'click', function(event) { 
    placeMarker(event.latLng); 
}); 
+1

如果你想要經緯度,你也可以使用'event.latLng.lat();'或'event.latLng.lng();'。 – Patosai 2014-11-08 04:43:58