我试图在地图上添加圆形叠加层,但如果用户放大或缩小地图,我必须使圆圈保持相同的大小 以下代码显示了我如何在地图上显示圆圈
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Circles</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var citymap = [
{
center: {lat:21.176801, lng: 72.832036}
}
];
var gmarkers = [];
var markers = [{
"title": 'point1',
"lat": '21.17700',
"lng": '72.8321000',
"description": 'uuu'
}];
function initMap() {
// Create the map.
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: {lat:21.176801, lng: 72.832036},
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [
{
"featureType": "poi",
"stylers": [
{ "visibility": "off" }
]
}
]
});
var infoWindow = new google.maps.InfoWindow();
var lat_lng = new Array();
var latlngbounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
lat_lng.push(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon:'peoples_Notif.png',
title: data.title
});
latlngbounds.extend(marker.position);
(function(marker, data) {
google.maps.event.addListener(marker, "click", function(e) {
infoWindow.setContent(data.title);
infoWindow.open(map, marker);
});
})(marker, data);
google.maps.event.addListener(marker, "click", function(e) {
map.setZoom(8);
});
gmarkers.push(marker);
}
map.setCenter(latlngbounds.getCenter());
// Construct the circle for each value in citymap.
//scale circle based on the radius
for (var i=0;i<citymap.length;i++) {
var cityCircle = new google.maps.Circle({
strokeColor: '#FFD700',
strokeOpacity: 1.0,
strokeWeight: 2,
fillColor: '#FFD700',
fillOpacity: 1.0,
map: map,
center: citymap[i].center,
radius:200
});
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkkS2pZmOgryjc3ZX0sE5Q8tIdsm-Ged4&signed_in=true&callback=initMap"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
</body>
</html>
可以说有一个选项,我可以启用或如何去做它
答案 0 :(得分:5)
有几种选择:
向地图添加zoom_changed
收听者,并根据缩放级别动态调整您的圈子大小(每个缩放级别为2个不同的因素)
对圆圈使用圆形标记,SVG符号似乎起作用:
var cityCircleM = new google.maps.Marker({
map: map,
position: citymap[i].center,
title: "circle",
icon: {
strokeColor: '#FFD700',
strokeOpacity: 1.0,
strokeWeight: 2,
fillColor: '#FFD700',
fillOpacity: 1.0,
path: google.maps.SymbolPath.CIRCLE,
scale: 20,
anchor: new google.maps.Point(0, 0)
},
zIndex: Math.round(citymap[i].center.lat * -100000) << 5
});