Question

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

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

Answer 1

你可以让一切变得动态：

proof of concept fiddle

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

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

Answer 2

您没有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 );
}

当然你可以从那里扩展它。从一张地图到另一张地图还有别的东西吗？只需在函数中添加另一个参数即可。

实现函数的JavaScript不重复这些块中的所有内容

2 个答案: