我试图在一个给定地址的网站上加载多个谷歌地图.最后一张地图是唯一显示的地图

I am trying to load more than one google map on a website given an address. The last map is the only one shown

本文关键字：地图 最后 谷歌地图 一张 显示 唯一 一个 网站 地址 加载      更新时间：2023-09-26

我正在尝试获取N个地址，并能够在N个谷歌地图上显示这些地址。我有N个div元素，class属性设置为"canvas"。当我运行代码时，最后一个表单元格元素包含我需要的位置的映射。其他表格单元格都不包含映射。

JavaScript:

// JavaScript Document
var geocoder;
var mapOptions;
var newLocation;
var element;
$(document).ready(function()
{
    $.each($(".canvas"),function(i,value)
    {   
        element = value;
        initialize($("tr").eq(i).children("td").text());
    });
});
function initialize(tr) 
{
geocoder = new google.maps.Geocoder();
codeAddress(tr);
}
function codeAddress(address) 
{       
    geocoder.geocode({ 'address': address}, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            newLocation = results[0].geometry.location;
            mapOptions = 
            {
                center: new google.maps.LatLng(newLocation.Ya,newLocation.Za),
                zoom: 10,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            map = new google.maps.Map(element, mapOptions);
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
}

HTML:

  <html>
      <head>
      </head>
      <body>
         <table>
             <tr>
                  <td>Address 1</td><td class="canvas"></td>
                  <td>Address 2</td><td class="canvas"></td>
                  <td>Address 3</td><td class="canvas"></td>
                  <td>Address 4</td><td class="canvas"></td>
                  <td>Address 5</td><td class="canvas"></td>
                  <td>Address 6</td><td class="canvas"></td>
             </tr>
         </table>
     </body>
  </html>

在$.each()的每个循环中覆盖element。

将其作为参数传递给codeAddress：

$.each($(".canvas"),function(i,element)
    {   
        initialize($(element).prev().text(),element);
    });


function codeAddress(address,element){
  //your code
}
相关文章：