AngularJS谷歌地图与多个标记 [英] AngularJS Google Map with Multiple Markers
本文介绍了AngularJS谷歌地图与多个标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我目前正在开发的离子框架（AngularJS）项目，该项目的用户广告位置和谷歌地图。
我想显示用户广告位置和多个标记周围的区域。
我已经拿到了地缘位置的工作，但似乎无法添加多个标记。
位置
VAR指标= [
{'伦敦眼，伦敦，51.503454，-0.119562}，
{'伦敦威斯敏斯特宫，51.499633，-0.124755}
];
Controller.JS
// 1.谷歌地图//
FCCAppCtrl.controller（'MapController'，函数（$范围，$ ionicLoading）{
$ scope.initialise =功能（）{
VAR myLatlng =新google.maps.LatLng（37.3000，-120.4833）;
VAR的MapOptions = {
中心：myLatlng，
变焦：16，
mapTypeId设为：google.maps.MapTypeId.ROADMAP
};
VAR地图=新google.maps.Map（的document.getElementById（图）的MapOptions）; navigator.geolocation.getCurrentPosition（功能（POS）{
map.setCenter（新google.maps.LatLng（pos.coords.latitude，pos.coords.longitude））;
VAR myLocation =新google.maps.Marker（{
位置：新google.maps.LatLng（pos.coords.latitude，pos.coords.longitude）
地图：地图，
动画：google.maps.Animation.DROP，
标题：我的位置
}）;
}）;
$ scope.map =图;
};
google.maps.event.addDomListener（的document.getElementById（地图），载荷，$ scope.initialise（））;
}）;
解决方案
// 1.谷歌地图//
VAR城市= [
{
城市：位置1，
说明：测试，
纬度：52.238983，
长：-0.888509
}，
{
城市：位置2，
说明：测试，
纬度：52.238168，
长：-52.238168
}，
{
城市：位置3，
说明：测试，
纬度：52.242452，
长：-0.889882
}，
{
城市：位置4，
说明：测试，
纬度：52.247234，
长：-0.893567
}，
{
城市：位置5，
说明：测试，
纬度：52.241874，
长：-0.883568
}
];FCCAppCtrl.controller（'MapController'，函数（$范围，$ ionicLoading）{
//地图设置//
$ scope.initialise =功能（）{
VAR myLatlng =新google.maps.LatLng（37.3000，-120.4833）;
VAR的MapOptions = {
中心：myLatlng，
变焦：16，
mapTypeId设为：google.maps.MapTypeId.ROADMAP
};
VAR地图=新google.maps.Map（的document.getElementById（图）的MapOptions）;
//广告位置/
navigator.geolocation.getCurrentPosition（功能（POS）{
map.setCenter（新google.maps.LatLng（pos.coords.latitude，pos.coords.longitude））;
VAR myLocation =新google.maps.Marker（{
位置：新google.maps.LatLng（pos.coords.latitude，pos.coords.longitude）
地图：地图，
动画：google.maps.Animation.DROP，
标题：我的位置
}）;
}）;
$ scope.map =图;
//附加标记//
$ scope.markers = [];
VAR信息窗口=新google.maps.InfoWindow（）;
VAR createMarker =功能（信息）{
VAR的标记=新google.maps.Marker（{
位置：新google.maps.LatLng（info.lat，info.long）
图：$ scope.map，
动画：google.maps.Animation.DROP，
标题：info.city
}）;
marker.content ='＆LT; DIV CLASS =infoWindowContent＆GT;' + info.desc +'＆LT; / DIV＆GT;';
google.maps.event.addListener（标记，'点击'，功能（）{
infoWindow.setContent（'＆LT; H2＆GT;'+ marker.title +'＆LT; / H＆GT;'+ marker.content）;
infoWindow.open（$ scope.map，标记）;
}）;
$ scope.markers.push（标记）;
}
对于（i = 0; I＆LT; cities.length;我++）{
createMarker（城市由[i]）;
} };
google.maps.event.addDomListener（的document.getElementById（地图），载荷，$ scope.initialise（））;}）;
I'm currently developing an Ionic Framework (AngularJS) project which users Geo Location and Google Maps.
I'm trying to display the users Geo Location and multiple markers around the area.
I've got the Geo Location working but can't seem to add multiple markers.
Locations
var markers = [
{'London Eye, London', 51.503454,-0.119562},
{'Palace of Westminster, London', 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',
desc : 'Test',
lat : 52.238168,
long : -52.238168
},
{
city : 'Location 3',
desc : 'Test',
lat : 52.242452,
long : -0.889882
},
{
city : 'Location 4',
desc : 'Test',
lat : 52.247234,
long : -0.893567
},
{
city : 'Location 5',
desc : 'Test',
lat : 52.241874,
long : -0.883568
}
];
FCCAppCtrl.controller('MapController', function($scope, $ionicLoading) {
// Map Settings //
$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);
// Geo Location /
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;
// 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,
animation: google.maps.Animation.DROP,
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"), 'load', $scope.initialise());
});
这篇关于AngularJS谷歌地图与多个标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
