javascript谷歌地图地理编码器初始化

Question

我正在尝试使用 google maps javascript API 来映射基于此示例的地址。

https://google-developers.appspot.com/maps/documentation/javascript/examples/geocoding-simple

文档推荐客户端 javascript 方法作为处理请求配额的最佳方式。到目前为止，一切都很好。我的问题是从这个例子转向我的具体案例。我的地址已经在数据库中，所以我不需要用户输入一个。我也不希望 map 随页面一起加载。相反，我希望在用户单击链接时加载地址 map 。

我有一个脚本可以使用 initialize () 在 div 中加载 map 。但我的问题是初始化以使用地理编码。示例中的地理编码取决于使用我不想要的 bodyonload 进行初始化加载。

这是代码。将不胜感激任何建议:

JavaScript

    var map;
    var geocoder;


     function codeAddress() {
            var address = document.getElementById('address').value;
            geocoder.geocode( { 'address': address}, function(results, status) {
              if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
              } else {
                alert('Geocode was not successful for the following reason: ' + status);
              }
            });
          }

      function initialize() {
    geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(40.7562008,-73.9903784);
        var myOptions = {
          zoom: 18,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
      }

html

<input id="address" type="hidden" value="Palo Alto CA">
<a href="javascript:void(0)" onclick="initialize()">View map without geocoding</a>
<div id="map_canvas" style="width:300px; height:300px;"></div>
<a href="javascript:void(0)" onclick="codeAddress()">View map of geocoded address</a>

Answer 1

我遇到的唯一问题是 initialize() 函数中的以下行:

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

通过声明 var map，您的脚本只是声明了一个名为 map 的局部变量，而不是使用在以下位置声明的全局 map 变量脚本的顶部。

通过删除 var，脚本使用全局变量并正常运行:

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

最后，要让地理编码 map 加载链接点击，将您的地理编码地址的 onclick 更改为 onclick="initialize();codeAddress();" .

添加:

尝试将您的 initialize() 和 codeAddress() 方法组合成以下内容:

function initialize() {
    geocoder = new google.maps.Geocoder();

    var address = document.getElementById('address').value;
    geocoder.geocode({ 'address': address }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var myOptions = {
                zoom: 18,
                center: results[0].geometry.location,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
}

然后只需从您的链接中调用 initialize()。

基本上，我们正在做的是调用 codeAddress() 正在执行的 geocoder.geocode()，并在生成的委托(delegate)中使用results[0].geometry.location 初始化 map 。这样，临时的latlong就不需要显示了。