在Ionic框架中添加Google地图

Adding Google map in Ionic Framework

本文关键字：Google 地图 添加 Ionic 框架      更新时间：2023-09-26

我使用离子框架。其中我有脚本标签的html模板。我无法通过javascript在模板中加载谷歌地图。

<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);

我也尝试使用内联脚本标签加载地图，但这也不适合我

不建议您在应用程序中使用谷歌地图。你这样工作是很困难的。由于ionic是一个单页应用程序，无论你是否显示谷歌地图，都会加载谷歌地图。

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

从快速入门:

  1. 在你页面的根目录下执行bower install angular-google-maps
    2. <
  2. 加载依赖/gh>
  3. 加载谷歌地图脚本

最后注入指令:

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

祝你好运!

相关文章：