Question

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

Answer 1

1.使用谷歌地图api cdn

<强> 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.使用地理位置插件

使用命令

安装 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

2 个答案: