在google map上画圆挺简单的,但是要想画的舒心却没找到现成代码,所以自己改了一段。效果如下,支持圆心和半径拖拽。

code部分,只整理了主要的,需要清空区域换marker样式什么自己搞就行。
var mapCircle = new google.maps.Circle({
map : gMap,
strokeColor : '#ff0000',
strokeOpacity : 0.6,
strokeWeight : 4
});
var startMarker = null;
var endMarker = null;
function createCircle() {
gMap.setOptions({
draggableCursor : 'crosshair'
});
google.maps.event.addListener(gMap, 'click', function(point) {
if (startMarker == null) {
startMarker = new google.maps.Marker({
position : point.latLng,
map : gMap
});
mapCircle.setCenter(point.latLng);
gMap.setOptions({
draggableCursor : 'pointer'
});
}
mapCircle.setMap(gMap);
});
google.maps.event.addListener(gMap, 'mousemove', function(point) {
if (startMarker != null && endMarker == null) {
var distance = google.maps.geometry.spherical
.computeDistanceBetween(startMarker.getPosition(),
point.latLng);
mapCircle.setRadius(distance);
}
});
google.maps.event.addListener(mapCircle, 'click', function(point) {
if (endMarker == null) {
// startMarker is center point. now set radius
endMarker = new google.maps.Marker({
position : point.latLng,
draggable : true,
raiseOnDrag : false,
map : gMap
});
google.maps.event.addListener(startMarker, 'drag', drawCircle);
google.maps.event.addListener(endMarker, 'drag', drawCircle);
startMarker.setDraggable(true);
startMarker.setAnimation(null);
drawCircle();
}
mapCircle.setMap(gMap);
});
google.maps.event.addListener(mapCircle, 'mousemove', function(point) {
if (startMarker != null && endMarker == null) {
var distance = google.maps.geometry.spherical
.computeDistanceBetween(startMarker.getPosition(),
point.latLng);
mapCircle.setRadius(distance);
}
});
};
function drawCircle() {
mapCircle.bindTo('center', startMarker, 'position');
var distance = google.maps.geometry.spherical.computeDistanceBetween(
startMarker.getPosition(), endMarker.getPosition());
mapCircle.setRadius(distance);
};
画多边形也不复杂,但是在多边形编辑方面 google maps api v3之后不支持类似于v2的enableEdit,一下就变得麻烦起来,这里推荐这个多边形编辑js,用起来效果比较好。


最近来得凤