1

我正在使用谷歌地图对地址进行地理编码并将该信息填充到输入字段中。我可以为 1 张地图成功执行此操作，但我的页面上需要有 2 张地图。每个都有自己的地理编码信息。

我试图将 Javascript 代码放在一起，基本上复制了我的第一张地图。

我的JavaScript如下

<script type="text/javascript">

         var geocoder;
         var map;

         function initialize() {
             geocoder = new google.maps.Geocoder();
             var latlng = new google.maps.LatLng(53.2948557, -6.139267399999994);
             var mapOptions = {
               zoom: 10,
               center: latlng,
               mapTypeId: google.maps.MapTypeId.ROADMAP
             }
             map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
          }

         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
                 });
                 document.getElementById("input_15_169").value = marker.getPosition().lat();
                 document.getElementById("input_15_167").value = marker.getPosition().lng();
                 document.getElementById("input_15_92").value = address;

               } else {
                 alert('Geocode was not successful for the following reason: ' + status);
               }
             });
           }

           var geocoder;
               var map2;

               function initialize() {
                   geocoder = new google.maps.Geocoder();
                   var latlng = new google.maps.LatLng(53.2948557, -6.139267399999994);
                   var mapOptions = {
                     zoom: 10,
                     center: latlng,
                     mapTypeId: google.maps.MapTypeId.ROADMAP
                   }
                   map2 = new google.maps.Map(document.getElementById('map_canvas2'), mapOptions);
                }

               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: map2,
                           position: results[0].geometry.location
                       });
                       document.getElementById("input_16_169").value = marker.getPosition().lat();
                       document.getElementById("input_16_167").value = marker.getPosition().lng();
                       document.getElementById("input_16_92").value = address;

                     } else {
                       alert('Geocode was not successful for the following reason: ' + status);
                     }
                   });
                 }

         </script>

在我的 html 中，我给了地图 2 个不同的 idmap_canvas和map_canvas2

但是，当我加载我的页面时，只出现第二张地图，当我尝试绘制地址时，即使上面的输入字段是正确的，也没有任何反应。

我想我在添加第二张地图并在上面的 javascript 中寻找一些建议时做错了。

谢谢

JSFiddle 代码在这里http://jsfiddle.net/JJKx5/

4

1 回答 1

2

你不能有同名的方法，否则解释器不知道选择哪一个，所以把你的逻辑放在一个方法中。

http://jsfiddle.net/JJKx5/1/

         function initialize() {
             geocoder = new google.maps.Geocoder();
             var latlng = new google.maps.LatLng(53.2948557, -6.139267399999994);
             var mapOptions = {
               zoom: 10,
               center: latlng,
               mapTypeId: google.maps.MapTypeId.ROADMAP
             };
             map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
             map2 = new google.maps.Map(document.getElementById('map_canvas2'), mapOptions);
          }
于 2012-11-17T14:19:22.217 回答