在我的流星应用上添加谷歌地图

Question

所以我试图将我制作的静态网站转换为流星应用程序，而不是每个商店有 5 个 html 文件，加上多个 html 标准页面，我将它们全部转换为“一个”单个 html使用指令文件，问题是当我试图在网站上插入地图时，由于某种原因它不起作用，我尝试了多种方法但仍然无法在页面上显示标准地图，更不用说定制版本..

这里我只是在 html 文件上定义地图（稍后我将更改 id 以显示我想要的每个商店的地图，或者只是根据我当前在页面上显示的商店更改 lat lng） ：

<div id="mapCS" class="map col-xs-12 col-sm-6 col-md-6 col-lg-6">
</div>

这是我在网站的静态版本上使用的 js 文件，它按预期工作（显然是在静态版本上）：

var map = new google.maps.Map(document.getElementById("mapCS"),
        mapOptions);

    var marker = new google.maps.Marker({
        position: myCenter,
        map: map,
        animation:google.maps.Animation.BOUNCE,
        title: 'Savoie Volailles Cranves Sales',
        icon: {
            url:"img/logo.png",
            scaledSize: new google.maps.Size(80, 64),
        }
    });

    google.maps.event.addListener(map, 'center_changed', function() {
        // 0.1 seconds after the center of the map has changed,
        // set back the marker position.
        window.setTimeout(function() {
            var center = map.getCenter();
            marker.setPosition(myCenter);
        }, 100);
    });
}
google.maps.event.addDomListener(window, 'load', initialize);

我还有一个脚本标签来插入我的 api 密钥..

Answer 1

使用angularui:angular-google-maps 作为推荐的here

只需添加依赖项并使用指令调用它。配置选项非常简单，可以通过控制器完成