我如何在离子应用程序中添加或使用 google-map

Question

如何在离子应用程序中添加或使用 google-map 我开始为 ionic 和其他人开发。

Answer 1

1.Usinggoogle地图apicdn

Html

<head>
    <meta charset="utf-8">
    <title>Map</title>
    <!-- google maps javascript -->
    <script src="//maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&sensor=true"></script>
</head>

<body ng-controller="MapCtrl">
    <ion-content>
        <div id="map" data-tap-disabled="true"></div>
    </ion-content>
</body>

</html>

控制器

angular.module('ionic.example', ['ionic'])

.controller('MapCtrl', function($scope, $ionicLoading, $compile) {
    function initialize() {
        var myLatlng = new google.maps.LatLng(43.07493, -89.381388);

        var mapOptions = {
            center: myLatlng,
            zoom: 16,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map"),
            mapOptions);

        //Marker + infowindow + angularjs compiled ng-click
        var contentString = "<div><a ng-click='clickTest()'>Click me!</a></div>";
        var compiled = $compile(contentString)($scope);

        var infowindow = new google.maps.InfoWindow({
            content: compiled[0]
        });

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Uluru (Ayers Rock)'
        });

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map, marker);
        });

        $scope.map = map;
    }
    google.maps.event.addDomListener(window, 'load', initialize);

    $scope.centerOnMe = function() {
        if (!$scope.map) {
            return;
        }

        $scope.loading = $ionicLoading.show({
            content: 'Getting current location...',
            showBackdrop: false
        });

        navigator.geolocation.getCurrentPosition(function(pos) {
            $scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
            $scope.loading.hide();
        }, function(error) {
            alert('Unable to get location: ' + error.message);
        });
    };

    $scope.clickTest = function() {
        alert('Example of infowindow with ng-click')
    };

});

Css

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

.scroll {
  height: 100%;
}

2.Using 地理定位插件

使用命令安装Apache Cordova Geolocation Plugin，

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git

Reference 1

Reference 2

Reference 3

Answer 2

不要使用 Javascript-API，使用像这个插件这样的原生解决方案：

https://www.npmjs.com/package/cordova-plugin-googlemaps-master

如果您使用该插件，您将获得：

– 无限制 api 次调用

– 更快的下载和地图绘制

– 用户流量减少

我如何在离子应用程序中添加或使用 google-map

How i can add or use google-map in ionic application

html

cordova

ionic