具有多个标记的AngularJS谷歌地图

发布时间：2020-12-17 06:54:36 所属栏目：安全来源：网络整理

导读：我目前正在开发一个Ionic Framework(AngularJS)项目,该项目使用Geo Location和Google Maps来显示用户的位置. 我正在尝试显示用户地理位置和该区域周围的多个标记. 我有Geo Location工作,但似乎无法添加多个标记. 地点 var markers = [ {'London Eye,London',

我目前正在开发一个Ionic Framework(AngularJS)项目,该项目使用Geo Location和Google Maps来显示用户的位置.

我正在尝试显示用户地理位置和该区域周围的多个标记.

我有Geo Location工作,但似乎无法添加多个标记.

地点

var markers = [
    {'London Eye,London',51.503454,-0.119562},{'Palace of Westminster,51.499633,-0.124755}
];

Controller.JS

// 1. Google Map // 
FCCAppCtrl.controller('MapController',function($scope,$ionicLoading) {
    $scope.initialise = 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,animation: google.maps.Animation.DROP,title: "My Location"
            });
        });
        $scope.map = map;
    };
    google.maps.event.addDomListener(document.getElementById("map"),'load',$scope.initialise());
});

解决方法

// 1. Google Map // 
var cities = [
    {
        city : 'Location 1',desc : 'Test',lat : 52.238983,long : -0.888509 
    },{
        city : 'Location 2',lat : 52.238168,long : -52.238168
    },{
        city : 'Location 3',lat : 52.242452,long : -0.889882 
    },{
        city : 'Location 4',lat : 52.247234,long : -0.893567 
    },{
        city : 'Location 5',lat : 52.241874,long : -0.883568 
    }
];

FCCAppCtrl.controller('MapController',$ionicLoading) {
    // Map Settings //
    $scope.initialise = function() {
        var myLatlng = new google.maps.LatLng(37.3000,mapOptions);
      // Geo Location /
        navigator.geolocation.getCurrentPosition(function(pos) {
            map.setCenter(new google.maps.LatLng(pos.coords.latitude,title: "My Location"
            });
        });
        $scope.map = map;
        // Additional Markers //
        $scope.markers = [];
        var infoWindow = new google.maps.InfoWindow();
        var createMarker = function (info){
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(info.lat,info.long),map: $scope.map,title: info.city
            });
            marker.content = '<div class="infoWindowContent">' + info.desc + '</div>';
            google.maps.event.addListener(marker,'click',function(){
                infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
                infoWindow.open($scope.map,marker);
            });
            $scope.markers.push(marker);
        }  
        for (i = 0; i < cities.length; i++){
            createMarker(cities[i]);
        }

    };
    google.maps.event.addDomListener(document.getElementById("map"),$scope.initialise());

});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!