Question

我必须创建一个表单，接受意大利城市的名称作为其相关参数。提交后，表单值应发送到Google地图服务，然后该服务应返回显示该城市位置的完整地图。我是谷歌地图的新手，所以我不确切知道如何做到这一点。我已经有了一个API密钥和所有相关的Google文档，但是，我没有找到一个很好的教程，清楚地解释了使其工作所需的所有步骤。我知道某处必须转换为地理编码（经纬度，我猜），但我对此并不是很了解。感谢所有花时间回答我的问题的人。

Answer 1

首先，我建议使用v3 API而不是v2 API，因为后者已被弃用以支持新版本。 v3 API不需要API密钥。

然后你描述的很容易。您可以使用Google Maps JavaScript API提供的Geocoding Services。不需要使用Server-side Geocoding Services，因为这可以在JavaScript中完全在客户端完成。请考虑以下示例：

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps Geocoding Demo</title> 
   <script src="http://maps.google.com/maps/api/js?sensor=false" 
           type="text/javascript"></script> 
</head> 
<body> 
   <div id="map" style="width: 400px; height: 300px;"></div> 

   <input type="text" id="search">
   <input type="button" onclick="geocode();" value="Search">

   <script type="text/javascript"> 
     var map = new google.maps.Map(document.getElementById('map'), { 
        mapTypeId: google.maps.MapTypeId.TERRAIN,
        center: new google.maps.LatLng(42.49, 18.46),
        zoom: 6
     });

     var geocoder = new google.maps.Geocoder();

     function geocode () {
        geocoder.geocode({
           'address': document.getElementById('search').value
        }, 
        function(results, status) {
           if(status == google.maps.GeocoderStatus.OK) {
              new google.maps.Marker({
                 position: results[0].geometry.location,
                 map: map
              });
              map.setCenter(results[0].geometry.location);
           }
        });
     }   
   </script> 
</body> 
</html>

截图：

alt text

Answer 2

最佳文档位于Google网站上： http://code.google.com/apis/maps/index.html

Google网站上有以下具体示例： http://code.google.com/apis/maps/documentation/javascript/examples/index.html

工作的Geocoding示例就在这里（使用View Source查看实现）： http://code.google.com/apis/maps/documentation/javascript/examples/geocoding-simple.html

如果您使用的是JavaScript API，我建议您使用不需要API密钥的版本3.

创建用于生成Google Map的搜索表单

2 个答案: