Question

我正在使用Google地图对地址进行地理编码，并将该信息填充到输入字段中。我可以成功完成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不同的ID map_canvas和map_canvas2

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

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

由于

JSFiddle Code http://jsfiddle.net/JJKx5/

Answer 1

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

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);
          }

2 Google地图使用同一页面上的地理编码

1 个答案: