HTML:
<ui-gmap-google-map center='map.center' zoom='map.zoom' control="map.control">
<ui-gmap-marker ng-repeat="marker in markers" coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id">
<ui-gmap-window show="true">
<div class="popup">
{{marker.content}}
</div>
</ui-gmap-window>
</ui-gmap-marker>
</ui-gmap-google-map>
JS:
控制器部分:
// Google地图
$scope.map = {
center: {
latitude: 0,
longitude: 0
},
zoom: 1,
mapTypeId: google.maps.MapTypeId.ROADMAP,
control: {}
};
// place a marker
$scope.markers = [];
function setMarker(lat, long, title, content) {
var marker = {
id: $scope.markers.length+1,
coords: {
latitude: lat,
longitude: long
},
content: content,
options: {
title: title,
icon: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png'
}
};
$scope.markers.push(marker);
};
$scope.DrawMap = function(response) {
console.log("DrawMap");
$scope.markers = [];
var data = response.json.response.data[0].data[1];
var markerLatLng = [];
var map = $scope.map.control.getGMap();
var bounds = new google.maps.LatLngBounds();
// set zoom level based on xlabel
var level = response.json.response.data[0].xlabel;
if (level === 'country') {
$scope.map.zoom = 4;
} else if (level === 'state') {
$scope.map.zoom = 4;
} else if (level === 'city') {
$scope.map.zoom = 6;
} else if (level === 'All Centres') {
$scope.map.zoom = 8;
}else if (level ==='divisons'){
$scope.map.zoom =10;
} else {
$scope.map.zoom = 4; //default to zoom 10
};
//set markers for each data
$.each(data, function(key, entry) {
setMarker(entry.lat, entry.long,
entry.x,
/*response.json.response.data[0].data[0] +*/
response.json.response.data[0].s1 + ": " + entry.s1 + " "+" "+
response.json.response.data[0].s2 + ": " + entry.s2);
var point = new google.maps.LatLng(entry.lat, entry.long);
markerLatLng.push(point);
var loc = new google.maps.LatLng(entry.lat, entry.long);
bounds.extend(loc);
});
map.fitBounds(bounds);
}
我的地图显示有标记。我想为该标记位置实现地理围栏。所以在drawmap();
内使用了以下代码,但地理围栏无效。
for (var marker in markers) {
// Add the circle for this city to the map.
var Circle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: markers[marker].center,
radius: 100
});
}
我在这里使用了类似的代码, https://developers.google.com/maps/documentation/javascript/examples/circle-simple