Question

我试图在弹出警报离子中插入地图。我没有做过，也不知道为什么。

var contentHtml = '<map style="width:100%;height:100%;" center="' + club.club_latitud + "," + club.club_longitud + '" zoom="17" data-tap-disabled="true"><marker position="' + club.club_latitud + "," + club.club_longitud + '"/></map>';

    $ionicPopup.show({
        title: 'Información Club',
        subTitle: club.club_nombre,
        content: contentHtml,
        buttons: [{
            text: 'Aceptar',
            type: 'button-positive',
            onTap: function(e) {

            }
        }]
    })

如果所有的数据，纬度，经度以及市场但未显示地图都会在弹出窗口内加载。

Answer 1

我最近做过类似的事。通过bower angular-google-maps

获取此库

将<script src="lib/angular-google-maps/dist/angular-google-maps.min.js"></script>添加到index.html

然后将此功能添加到服务或工厂

angular.module('app.services')
    .factory('LocationService', LocationService);

LocationService.$inject = ['$q', '$ionicModal', '$timeout', '$ionicPopup', '$ionicLoading', '$rootScope', '$cordovaGeolocation', 'uiGmapGoogleMapApi'];

function FileService($q, $ionicModal, $timeout, $ionicPopup, $ionicLoading, $rootScope, $cordovaGeolocation, uiGmapGoogleMapApi) {
    return {
        selectLocation: selectLocation
    };

function selectLocation(mapCenter) {
        var def = $q.defer();
        var locationScope = $rootScope.$new();
        locationScope.location = {};
        locationScope.geocodeAddress = geocodeAddress;
        locationScope.chooseLocation = chooseLocation;
        locationScope.cancelModal = cancelModal;



        $ionicModal.fromTemplateUrl('some/folder/locationpicker.html', {
            scope: locationScope,
            animation: 'slide-in-up'
        }).then(function (modal) {

            locationScope.modal = modal;
            locationScope.modal.show().then(function () {
                var mapOptions = {
                    zoom: 15,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var geocoder = new google.maps.Geocoder;
                locationScope.map = new google.maps.Map(document.getElementById("map"), mapOptions);

                google.maps.event.addListener(locationScope.map, "dragend", function () {
                    locationScope.geocodeLoading = true;
                    var mapCenter = locationScope.map.getCenter();
                    var latlng = { lat: mapCenter.lat(), lng: mapCenter.lng() };
                    var addressReqUrl = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + latlng.lat + ',' + latlng.lng + '&';
                    locationScope.geocodeRequestCanceller = $q.defer();
                    locationScope.geocodeTimeout = $timeout(function () {
                        $http.get(addressReqUrl, { timeout: locationScope.geocodeRequestCanceller }).then(function (response) {
                            locationScope.location = {
                                latitude: mapCenter.lat(),
                                longitude: mapCenter.lng(),
                                address: response.data.results[0].formatted_address
                            };
                            delete locationScope.geocodeRequestCanceller;
                            locationScope.geocodeLoading = false;
                        });
                    }, 500);

                });

                google.maps.event.addListener(locationScope.map, "dragstart", function () {
                    if (locationScope.geocodeTimeout) {
                        $timeout.cancel(locationScope.geocodeTimeout);
                    }
                    if (locationScope.geocodeRequestCanceller) {
                        locationScope.geocodeRequestCanceller.resolve();
                        delete locationScope.geocodeRequestCanceller;
                    }
                });
                if (mapCenter) {
                    locationScope.location.address = mapCenter.address;
                    setLocation(mapCenter.latitude, mapCenter.longitude);
                }
            });
        });

        function setLocation(lat, lng) {
            var latLng = new google.maps.LatLng(lat, lng);
            locationScope.map.setCenter(latLng);
        }

        function geocodeAddress(address) {
            var geocoder = new google.maps.Geocoder();

            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status === google.maps.GeocoderStatus.OK) {
                    $timeout(function () {
                        var location = results[0].geometry.location;
                        setLocation(location.lat(), location.lng());
                        angular.extend(locationScope.location, {
                            latitude: location.lat(),
                            longitude: location.lng(),
                            address: results[0].formatted_address
                        });
                    }, 1);
                } else {
                    console.log('Geocode was not successful for the following reason: ' + status);
                }
            });
        }

        function cleanUp() {
            locationScope.modal.hide();
            locationScope.modal.remove();
        }

        function cancelModal() {
            cleanUp();
            def.resolve();
        }

        function chooseLocation() {
            if (!locationScope.location) {
                $ionicPopup.alert({
                    title: 'Validation Error!',
                    template: 'You have to select a location'
                });
                return;
            }
            var location = angular.extend({}, locationScope.location);
            var mAddr = location.latitude + "," + location.longitude;
            location.mapUrl = 'https://maps.googleapis.com/maps/api/staticmap?zoom=15&scale=1&size=600x400&markers=' + mAddr + '&center=' + mAddr
            cleanUp();
            def.resolve(location);
        }
        return def.promise;
    }
 }

Locationpicker.html

<ion-modal-view>

    <ion-content>
        <div class="list">

            <div class="item item-input-inset">

                <label class="item-input item-input-wrapper">
                   <i class="icon ion-search placeholder-icon"></i>
   <input ng-model="postcode" type="search" ng-enter="geocodeAddress(postcode)" placeholder="Postcode/Address">
                </label>
                <button ng-click="geocodeAddress(postcode)" ng-class="{'ion-search' : !!map, 'button-clear' : !map }" class="button icon button-small button-balanced">
                    <ion-spinner ng-if="!map" class="spinner-balanced" icon="spiral"></ion-spinner>
                </button>
            </div>
            <div class="item item-image">
                <div id="map" data-tap-disabled="true"></div>
            </div>
            <div class="item item-text-wrap pi-small-text">
                {{location.address}}
            </div>
        </div>

    </ion-content>
    <div class="bar bar-footer">
        <button class="button button-clear button-assertive" ng-click="cancelModal()">Cancel</button>
        <div class="title"></div>
        <button class="button button-clear button-positive" ng-click="chooseLocation()">
            <span ng-if="!geocodeLoading">Choose</span>
            <ion-spinner ng-if="geocodeLoading" class="spinner-balanced" icon="spiral"></ion-spinner>
        </button>
    </div>
</ion-modal-view>

用法

LocationService.selectLocation(latlng)
                        .then(function (location) {
                            if (location) {
                                vm.newLocation = { lat: location.latitude, lng: location.longitude, address: location.address, mapUrl: location.mapUrl };
                                }
                        });

可能有比你需要的更多的东西，我会把多余的东西留给你。

离子Popup内的地图

1 个答案: