Question

我正在尝试在我的应用中的同一页面上加载多个地图（比方说2）。

html看起来像这样：

        <div id="map_canvas" style="width:400px; height:500px" ></div>
        <div id="map_canvas1" style="width:400px; height:500px" ></div>

.js文件如下所示：

    var myOptions = {
            zoom: 14,
            center: new google.maps.LatLng(40.71, 74),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }


    var map_canvas = document.getElementById("map_canvas");
    if (map_canvas)
        var map = new google.maps.Map(map_canvas, myOptions);
    var map_canvas1 = document.getElementById("map_canvas1");
    if (map_canvas1)
        var map2 = new google.maps.Map(map_canvas1, myOptions);

地图显示在页面上但不加载（它只是灰色背景）

任何人都可以帮我吗？

Answer 1

我试过你的例子，但它确实奏效了。我唯一改变的是“缩放”属性，我将其设置为3，因为地图放大了太多，也许这就是灰色区域为您显示的原因。试试：

var myOptions = {
        zoom: 3,
        center: new google.maps.LatLng(40.71, 74),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

如何使用Ionic和angularJS在同一页面上复制多个地图？

1 个答案: