1

在我的应用程序中，我需要显示多个谷歌地图。我已经这样做了（http://jsbin.com/arepaj/1/edit）来显示2张地图，但我觉得多次使用相同的结构是一种肮脏的方式。因为，我复制了两次相同的谷歌地图元素，以便能够显示两张地图。

如何动态创建多个谷歌地图，以便我只能将位置坐标传递给函数并创建多个地图。我最关心的是如何动态创建“div”标签以显示每个地图。

4

2 回答 2

0

您可以使一切动态化：

概念证明小提琴

function makeMap(lat,lng,zoom,type,index) {
    var elem =  document.createElement('div');
    elem.setAttribute('id','map'+index);
    elem.setAttribute('style',"width: 500px; height: 300px");
    document.getElementsByTagName('body')[0].appendChild(elem);
    var map = new google.maps.Map(elem,{
        center: new google.maps.LatLng(lat,lng),
        zoom: zoom,
        mapTypeId: type});
    return map;
}

您将必须添加一些功能，以便将地图放在页面上您想要的位置（这个概念证明只是在创建它们时将它们附加到正文中）。

于 2013-08-08T00:59:48.463 回答
0

您没有 Maps API 问题，您有 JavaScript 问题。这是一个很好的问题。

真正的问题是：“我有两个非常相似的 JavaScript 代码块。有没有办法在不重复这些块中的所有内容的情况下编写它？”

答案是“是的！把重复的代码放在一个函数中。”

从 jsbin 获取您的代码并进行最简单的更改以将代码移动到一个通用函数中，您将拥有如下内容：

function createMap( id, lat, lng ) {
    var container = document.getElementById( id );
    var center = new google.maps.LatLng( lat, lng );

    var map = new google.maps.Map( container, {
        zoom: 10,
        center: center,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
}

 function initialize() {
    createMap( 'map_canvas', 48.1391265, 11.580186300000037 );
    createMap( 'map_canvas2', 46.702, 11.678 );
}

当然，您可以从那里扩展它。还有其他东西会从一张地图到另一张地图有所不同吗？只需向函数添加另一个参数。

于 2013-08-08T01:01:48.030 回答