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

Question

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

hd.*_*hd. 3 javascript google-maps

我有一个表单,我想添加一个"选择位置"选项.

我该怎么做？如何将一个引脚作为选定的位置？

Answer 1

Dan*_*llo 5

您可能需要考虑使用Google Maps API,正如davek已经建议的那样.

以下示例可帮助您入门.您需要做的就是userLocation使用您提到的下拉字段中的用户选择的位置更改JavaScript变量.

<!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>

Run Code Online (Sandbox Code Playgroud)

上面的示例将呈现如下所示的地图:

根据所选位置渲染谷歌地图

如果Google客户端地理编码器无法从地址中检索坐标,则地图不会显示.

归档时间：	15 年，6 月前
查看次数：	1359 次
最近记录：	11 年，2 月前