2010-04-12 47 views
3

我有一個表單,我想添加一個「選擇位置」選項。如何在我的網站上添加Google地圖?

我該如何做到這一點,以及如何將銷釘作爲選定的位置?

+3

我們可以看到一些代碼嗎?或更多的背景?或兩者? – 2010-04-12 19:38:49

回答

5

你可能要考慮使用Google Maps API,作爲davek already suggested

以下示例可幫助您入門。您需要做的就是將JavaScript變量userLocation更改爲用戶從您提到的下拉字段中選擇的位置。

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps API Demo</title> 
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false" 
      type="text/javascript"></script> 
    </head> 
    <body onunload="GUnload()"> 

    <div id="map_canvas" style="width: 400px; height: 300px"></div> 

    <script type="text/javascript"> 

    var userLocation = 'London, UK'; 

    if (GBrowserIsCompatible()) { 
     var geocoder = new GClientGeocoder(); 
     geocoder.getLocations(userLocation, function (locations) {   
      if (locations.Placemark) 
      { 
      var north = locations.Placemark[0].ExtendedData.LatLonBox.north; 
      var south = locations.Placemark[0].ExtendedData.LatLonBox.south; 
      var east = locations.Placemark[0].ExtendedData.LatLonBox.east; 
      var west = locations.Placemark[0].ExtendedData.LatLonBox.west; 

      var bounds = new GLatLngBounds(new GLatLng(south, west), 
              new GLatLng(north, east)); 

      var map = new GMap2(document.getElementById("map_canvas")); 

      map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds)); 
      map.addOverlay(new GMarker(bounds.getCenter())); 
      } 
     }); 
    } 
    </script> 
    </body> 
</html> 

以上例子將呈現圖像下面的一個:

Render google map in based on selected location

的地圖將不會顯示,如果Google Client-side Geocoder不能retreive根據輸入的地址的座標。

2

查看Google Maps API。這裏有很多信息和幾個例子:不瞭解更多關於你的環境/需求的信息,它很難更具體。

相關問題