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

Adding a Google Map on my meteor app

本文关键字：程序上 添加 谷歌地图 应用程序 应用 我的 流星      更新时间：2023-09-26

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

在这里，我

只是在 html 文件上定义地图(我稍后会更改 id 以显示我想要的每个商店的地图，或者只是根据我当前在页面上显示的商店更改纬度 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 密钥。

使用此处推荐的angularui：angular-google-maps

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

相关文章：