javascript - 2 个谷歌地图在同一页面上使用地理编码

Question

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

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

我的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 中，我给了 map 2 个不同的 id 的 map_canvas 和 map_canvas2

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

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

谢谢

JSFiddle 代码在这里 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);
          }