Question

我有一个表单，我想添加一个“选择位置”选项。

我该怎么办？如何将别针作为选定的位置？

Answer 1

您可能需要考虑将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无法从地址中检索坐标，地图将不会显示。

Answer 2

查看Google Maps API。那里有很多信息和几个例子：在不了解您的环境/要求的情况下，很难更具体。

如何在我的网站上添加Google地图？

2 个答案: