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

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

我试过你的例子，它成功了。我唯一更改的是 'zoom' 属性，我已将其设置为 3，因为地图放大太多，也许这就是为您显示灰色区域的原因。尝试：

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

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

How to multiple maps on the same page using Ionic and angularJS?

angularjs

google-maps

maps

ionic