Question

我在angularjs应用程序中添加了谷歌地图，但我无法在地图上显示标记。我在这个主题上经历了很多帖子（例如：this和this），但它无能为力。下面是我的代码片段，其中lat和long是从随机数生成的：

HTML：

<ion-view view-title="Map">
    <ion-content data-tap-disabled="true">
        <div id="map">
            <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options">
                <ui-gmap-markers models="markers" coords="'coords'" idKey="'idKey'"></ui-gmap-markers>
            </ui-gmap-google-map>
        </div>        
    </ion-content>     
</ion-view>

控制器：

uiGmapGoogleMapApi.then(function(maps) {
    lat = (Math.random()*(40-20)+20);
    long = (Math.random()*(140-10)+10);
    $scope.map = { center: { latitude: lat, longitude: long }, zoom: 8 };        
});



uiGmapIsReady.promise(1).then(function(instances) {
    instances.forEach(function(inst) {
    var map = inst.map;
    var uuid = map.uiGmap_id;
    var myLatlng = new google.maps.LatLng(lat,long); 
    var mapOptions = { 
        zoom: 4, 
        center: myLatlng 
    } 
    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);  
    var marker = new google.maps.Marker({ 
        position: myLatlng, 
        map: map, 
        title: 'test!' 
    });

任何人都可以帮助知道要改变什么来使标记在谷歌地图上看到。下面显示的地图目前没有标记：

Answer 1

我无法在您的initialize代码中看到controller功能。请确保在全局上下文中定义initialize函数。

angular.module('main', ['ionic'])
    .controller('LocationCtrl', function ($scope, $ionicLoading, $compile, $window) {
    function initialize() {
        google.maps.event.addDomListener(window, 'load');

        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({
            //your random marker generation code
        });

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

        $scope.map = map;
    }

    $window.initialize = initialize; // callback in global context

    function loadScript(src) {
        var script = document.createElement("script");
        script.type = "text/javascript";
        document.getElementsByTagName("head")[0].appendChild(script);
        script.src = src;
    }

    loadScript('http://www.google.com.mt/jsapi');
    loadScript('http://maps.googleapis.com/maps/api/js?key=&v=3&sensor=true&callback=initialize');



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

        $scope.loading = $ionicLoading.show({
            content: 'Getting 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')
    };
});

Answer 2

我已删除mapOptions和map，因为无需再次初始化map。现在标记正在好转。

uiGmapIsReady.promise(1).then(function(instances) {

    instances.forEach(function(inst) {
    var map = inst.map;
    var uuid = map.uiGmap_id; 
    var myLatlng = new google.maps.LatLng(lat,long); 
    var marker = new google.maps.Marker({ 
        position: myLatlng, 
        map: map, 
        title: '' 
    });

});

angularjs：标记没有出现在谷歌地图上

2 个答案: