在 Ionic Framework 中添加 Google 地图

Question

我正在使用离子框架。其中我在 Script 标签中有 html 的模板。我无法通过 javascript.

在模板中加载 google 地图

<script id="templates/facts.html" type="text/ng-template">
    <ion-view view-title="Facts">
        <ion-content padding="true">
            <div id="googleMap" style="width:100%; height:100%"></div>
        </ion-content>
    </ion-view>
</script>

在我的主 javascript 文件中，我正在像这样加载地图。

function initialize() {
   var mapProp = {
   center:new google.maps.LatLng(51.508742,-0.120850),
   zoom:5,
   mapTypeId:google.maps.MapTypeId.ROADMAP
  };
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);

我也尝试过使用内联脚本标签加载地图，但这对我来说也不起作用

Answer 1

不推荐您在应用程序中使用 google 地图的方式。你这样工作会很困难。由于 ionic 是单页应用程序，因此无论您是否显示 google 地图，都会加载 google 地图。

最好的方法是使用 angular-google-maps.

From quickstart:

在你页面的根目录执行bower install angular-google-maps
加载依赖项
加载google地图脚本

最后注入指令：

angular.module('myApplicationModule', ['uiGmapgoogle-maps']).config(
    ['uiGmapGoogleMapApiProvider', function(GoogleMapApiProviders) {
        GoogleMapApiProvider.configure({
            china: true
        });
    }]
);

祝你好运！

在 Ionic Framework 中添加 Google 地图

Adding Google map in Ionic Framework

html

javascript

google-maps

loading