Question

我现在正在学习Ionic，我正在尝试在我的项目中创建一个地图模块，但是当我从侧边栏点击maps.html时它没有显示任何内容，我认为我在库问题上遇到了一些问题。任何建议都将不胜感激。

maps.js

<ion-view title="Maps" id="page4">
<ion-content overflow-scroll="true" padding="true" class="has-header" ng-controller="MapController">
 <div id="map" data-tap-disabled="true"></div>
</ion-content>

的index.html

 <script src="http://maps.googleapis.com/maps/api/js?key=[mykeynumber]&sensor=true"></script>

的style.css

.scroll {
    height: 100%;
}

#map {
    width: 100%;
    height: 100%;
}

app.js

foo.controller('MapController', function($scope, $ionicLoading) {


google.maps.event.addDomListener(window, 'load', function() {
    var myLatlng = new google.maps.LatLng(37.3000, -120.4833);

    var mapOptions = {
        center: myLatlng,
        zoom: 16,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

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

    navigator.geolocation.getCurrentPosition(function(pos) {
        map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
        var myLocation = new google.maps.Marker({
            position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
            map: map,
            title: "My Location"
        });
    });

    $scope.map = map;
});


});

I'm getting a blank Map page

Answer 1

尝试添加此链接，其工作

<script src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>

<强> Demo

Answer 2

我实现了演示并且它有效。当我点击谷歌地图上的＆＃34;视图时，它也可以正常工作。部分在浏览器上。我可以将用户引导到新选项卡中的浏览器中的特殊位置，但是当我在我的Android设备上运行时＃34;在谷歌地图上查看＆＃34;不可点击。我只想通过Android中的谷歌地图应用程序指向用户。任何建议和建议将不胜感激。

Google Map无法在Ionic Application中使用

2 个答案: