大佬教程收集整理的这篇文章主要介绍了angularjs – angular-google-maps中心缩放多个标记,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
这是我的观点:
<ion-view title="" ng-controller="MapCtrl as vm"> <ion-content class="padding"> <google-map id="mainMap" control="vm.googleMap" draggable="true" center="vm.map.center" zoom="vm.map.zoom" mark-click="false"> <markers idKey="mainMap" fit="vm.map.fit"> <marker idKey="marker.id" ng-repeat="marker in vm.map.markers" coords="marker.coords" options="marker.options"> <marker-label content="marker.name" anchor="2 0" class="marker-labels"/> </marker> </markers> </google-map> </ion-content> </ion-view>
这是我的控制器:
angular.module('myApp.controllers',[]) .controller('MapCtrl',function($scope,$ionicPlatform) { var vm = this; vm.googleMap = {}; // this is filled when google map is initialized,but it's too late vm.mapMarkers = []; vm.arrMarkers = [ { id: "home",name: "home",coords: { latitude:xxxxxxx,//valid coords longitude:xxxxxxx //valid coords },options: { animation: google.maps.Animation.bOUNCE } },{ id: "placeAId",name: "Place A",//valid coords longitude:xxxxxxx //valid coords } },{ id: "placeBId",name: "Place B",//valid coords longitude:xxxxxxx //valid coords } } ]; vm.map = { center: { //how to determine where to center??? latitude: xxxxxxx,//valid coords longitude: xxxxxxx //valid coords },zoom: 12,//how to determine zoom dynamically??? fit: true,markers: vm.arrMarkers }; var setMapBounds = function () { var bounds = new google.maps.LatLngBounds(); createMarkers(); var markers = vm.mapMarkers; for(var i=0; i<markers.length; i++) { bounds.extend(markers[i].getPosition()); } var map = vm.googleMap.control.getGMap(); map.setCenter(bounds.getCenter()); map.fitBounds(bounds); //remove one zoom level to ensure no marker is on the edge. map.setZoom(map.getZoom()-1); // set a minimum zoom // if you got only 1 marker or all markers are on the same address map will be zoomed too much. if(map.getZoom()> 15){ map.setZoom(15); } }; var createMarkers = function() { var map = vm.googleMap.control.getGMap(); //vm.googleMap.control is undefined because this fire before map is initialized angular.forEach(vm.restaurants,function(restaurant,indeX) { var marker = new google.maps.Marker({ map: map,position: new google.maps.LatLng(restaurant.coords.latitude,restaurant.coords.longitudE),title: restaurant.name }); vm.mapMarkers.push(marker); }); }; $ionicPlatform.ready(function() { setMapBounds(); });
})
所以,我的问题是如何使用多个动态加载的标记来居中和缩放地图?另外,如何在加载地图之前获取googleMap.control(vm.googleMap.control)的实例?
angular.module('myApp.controllers',[]) .controller('MapCtrl',function($scopE) { var vm = this; vm.googleMap = null; vm.mapMarkers = []; var onsuccess = function(position) { vm.userLOCATIOn.coords.latitude = position.coords.latitude; vm.userLOCATIOn.coords.longitude = position.coords.longitude; initializeMap(); }; var onError = function(error) { alert('code: ' + error.code + '\n' + 'message: ' + error.messagE); }; vm.userLOCATIOn = { id: "home",title: "home",coords: { latitude: 33.636727,longitude: -83.920702 },options: { animation: google.maps.Animation.bOUNCE } }; vm.places = [ { id: "78869C43-C694-40A5-97A0-5E709AA6CE51",title: "Place A",coords: { latitude: 33.625296,longitude: -83.976206 } },{ id: "52319278-83AA-46D4-ABA6-307EAF820E77",title: "Place B",coords: { latitude: 33.576522,longitude: -83.964981 } } ]; var addMarkers = function() { var userLOCATIOn = new google.maps.Marker({ map: vm.googleMap,position: new google.maps.LatLng(vm.userLOCATIOn.coords.latitude,vm.userLOCATIOn.coords.longitudE),//animation: vm.userLOCATIOn.options.animation,title: vm.userLOCATIOn.title }); vm.mapMarkers.push(userLOCATIOn); angular.forEach(vm.places,function(LOCATIOn,indeX) { var marker = new google.maps.Marker({ map: vm.googleMap,position: new google.maps.LatLng(LOCATIOn.coords.latitude,LOCATIOn.coords.longitudE),title: LOCATIOn.title }); vm.mapMarkers.push(marker); }); var bounds = new google.maps.LatLngBounds(); for (var i = 0; i < vm.mapMarkers.length; i++) { bounds.extend(vm.mapMarkers[i].getPosition()); } vm.googleMap.setCenter(bounds.getCenter()); vm.googleMap.fitBounds(bounds); //remove one zoom level to ensure no marker is on the edge. vm.googleMap.setZoom(vm.googleMap.getZoom() - 1); // set a minimum zoom // if you got only 1 marker or all markers are on the same address map will be zoomed too much. if (vm.googleMap.getZoom() > 15) { vm.googleMap.setZoom(15); } }; var initializeMap = function() { var mapOptions = { mapTypEID: google.maps.MapTypEID.roaDMAP,center: new google.maps.LatLng(vm.userLOCATIOn.coords.latitude,vm.userLOCATIOn.coords.longitudE) }; var div = document.getElementById("map_canvas"); //var map = plugin.google.maps.Map.getMap(div,mapOptions); vm.googleMap = new google.maps.Map(div,mapOptions); addMarkers(); var width = screen.width; var height = screen.height; }; navigator.geoLOCATIOn.getCurrentPosition(onsuccess,onError); })
以上是大佬教程为你收集整理的angularjs – angular-google-maps中心缩放多个标记全部内容,希望文章能够帮你解决angularjs – angular-google-maps中心缩放多个标记所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。