我正在努力画出＆＃39; Google Maps V3上的椭圆形状。我似乎无法找到一种简单的方法来做到这一点。
目前，我正在使用一系列多边形进行此操作，但正如您从我的JSFIDDLE中看到的那样，这样做是一项艰巨的任务，可以让您顺利完成任务。椭圆形。
有更好的方法吗？
这就是我现在所拥有的： -
/* Google Map - Areas we cover */
var center = new google.maps.LatLng(51.2576646,-0.3258271);
function initialize() {
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var isDraggable = w > 480 ? true : false;
var mapOptions = {
zoom: 7,
center: center,
scrollwheel: false,
draggable: isDraggable,
disableDefaultUI: true,
zoomControl: true
};
var map = new google.maps.Map(document.getElementById('areas'),
mapOptions);
var styles = [
{"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"saturation":"-63"},{"lightness":"23"}]},{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"saturation":"-100"},{"lightness":"25"}]},{"featureType":"landscape.natural.terrain","elementType":"geometry.fill","stylers":[{"saturation":"0"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"saturation":"0"},{"color":"#95bf97"},{"lightness":"59"}]},{"featureType":"poi.school","elementType":"geometry.fill","stylers":[{"lightness":"5"},{"hue":"#ff0000"},{"saturation":"-100"}]},{"featureType":"poi.sports_complex","elementType":"geometry.fill","stylers":[{"lightness":"5"},{"saturation":"-100"}]},{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"saturation":"-85"},{"lightness":"12"}]}
];
// Areas Circle Polygon
var myCoordinates = [
new google.maps.LatLng(51.522416,-0.142822),
new google.maps.LatLng(51.426614,-0.845947),
new google.maps.LatLng(51.303145,-1.109619),
new google.maps.LatLng(51.110420,-1.252441),
new google.maps.LatLng(50.958427,-1.065674),
new google.maps.LatLng(50.833698,-0.681152),
new google.maps.LatLng(50.785102,-0.043945),
new google.maps.LatLng(50.840636,0.362549),
new google.maps.LatLng(50.965346,0.845947),
new google.maps.LatLng(51.110420,0.966797),
new google.maps.LatLng(51.296276,0.966797),
new google.maps.LatLng(51.412912,0.747070),
new google.maps.LatLng(51.522416,0.010986),
new google.maps.LatLng(51.522416,-0.109863)
];
var polyOptions = {
path: myCoordinates,
strokeColor: "#21509b",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#21509b",
fillOpacity: 0.3
}
var it = new google.maps.Polygon(polyOptions);
it.setMap(map);
map.setOptions({styles: styles});
}
initialize();
答案 0 :(得分：2)
一个选项（实际上你正在做的，但分辨率更高）是使用移植到v3的Mike Williams' eshapes library版本。
代码段
/* Google Map - Areas we cover */
var center = new google.maps.LatLng(51.2576646, -0.3258271);
function initialize() {
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var isDraggable = w > 480 ? true : false;
var mapOptions = {
zoom: 7,
center: center,
scrollwheel: false,
draggable: isDraggable,
disableDefaultUI: true,
zoomControl: true
};
var map = new google.maps.Map(document.getElementById('areas'),
mapOptions);
var styles = [{
"featureType": "landscape.man_made",
"elementType": "geometry.fill",
"stylers": [{
"saturation": "-63"
}, {
"lightness": "23"
}]
}, {
"featureType": "landscape.natural",
"elementType": "geometry.fill",
"stylers": [{
"saturation": "-100"
}, {
"lightness": "25"
}]
}, {
"featureType": "landscape.natural.terrain",
"elementType": "geometry.fill",
"stylers": [{
"saturation": "0"
}]
}, {
"featureType": "poi.park",
"elementType": "geometry.fill",
"stylers": [{
"saturation": "0"
}, {
"color": "#95bf97"
}, {
"lightness": "59"
}]
}, {
"featureType": "poi.school",
"elementType": "geometry.fill",
"stylers": [{
"lightness": "5"
}, {
"hue": "#ff0000"
}, {
"saturation": "-100"
}]
}, {
"featureType": "poi.sports_complex",
"elementType": "geometry.fill",
"stylers": [{
"lightness": "5"
}, {
"saturation": "-100"
}]
}, {
"featureType": "road.local",
"elementType": "geometry.fill",
"stylers": [{
"saturation": "-85"
}, {
"lightness": "12"
}]
}];
var bounds = new google.maps.LatLngBounds();
// Areas Circle Polygon
var myCoordinates = [
new google.maps.LatLng(51.522416, -0.142822),
new google.maps.LatLng(51.426614, -0.845947),
new google.maps.LatLng(51.303145, -1.109619),
new google.maps.LatLng(51.110420, -1.252441),
new google.maps.LatLng(50.958427, -1.065674),
new google.maps.LatLng(50.833698, -0.681152),
new google.maps.LatLng(50.785102, -0.043945),
new google.maps.LatLng(50.840636, 0.362549),
new google.maps.LatLng(50.965346, 0.845947),
new google.maps.LatLng(51.110420, 0.966797),
new google.maps.LatLng(51.296276, 0.966797),
new google.maps.LatLng(51.412912, 0.747070),
new google.maps.LatLng(51.522416, 0.010986),
new google.maps.LatLng(51.522416, -0.109863)
];
for (var i = 0; i < myCoordinates.length; i++) {
bounds.extend(myCoordinates[i]);
}
var major_axis = google.maps.geometry.spherical.computeDistanceBetween(bounds.getNorthEast(), new google.maps.LatLng(bounds.getSouthWest().lat(), bounds.getNorthEast().lng())) / 2;
var minor_axis = google.maps.geometry.spherical.computeDistanceBetween(
new google.maps.LatLng(bounds.getCenter().lat(), bounds.getSouthWest().lng()),
new google.maps.LatLng(bounds.getCenter().lat(), bounds.getNorthEast().lng())) / 2;
// === Ellipse ===
var point = bounds.getCenter(); // new google.maps.LatLng(43,-78);
var ellipse = google.maps.Polygon.Ellipse(point, major_axis, minor_axis, 0, "#000000", 2, 1, "#ffff00", 0.5);
ellipse.setMap(map);
var polyOptions = {
path: myCoordinates,
strokeColor: "#21509b",
strokeOpacity: 0.5,
strokeWeight: 2,
fillColor: "#21509b",
fillOpacity: 0.2
}
var it = new google.maps.Polygon(polyOptions);
it.setMap(map);
map.setOptions({
styles: styles
});
}
google.maps.event.addDomListener(window, 'load', initialize);
// This Javascript is based on code provided by the
// Community Church Javascript Team
// http://www.bisphamchurch.org.uk/
// http://econym.org.uk/gmap/
// EShapes.js
//
// Based on an idea, and some lines of code, by "thetoy"
//
// This Javascript is provided by Mike Williams
// Community Church Javascript Team
// http://www.bisphamchurch.org.uk/
// http://econym.org.uk/gmap/
//
// This work is licenced under a Creative Commons Licence
// http://creativecommons.org/licenses/by/2.0/uk/
//
// Version 0.0 04/Apr/2008 Not quite finished yet
// Version 1.0 10/Apr/2008 Initial release
// Version 3.0 12/Oct/2011 Ported to v3 by Lawrence Ross
google.maps.Polygon.Ellipse = function(point, r1, r2, rotation, strokeColour, strokeWeight, Strokepacity, fillColour, fillOpacity, opts) {
rotation = rotation || 0;
return google.maps.Polygon.Shape(point, r1, r2, r1, r2, rotation, 100, strokeColour, strokeWeight, Strokepacity, fillColour, fillOpacity, opts)
}
google.maps.Polygon.Shape = function(point, r1, r2, r3, r4, rotation, vertexCount, strokeColour, strokeWeight, Strokepacity, fillColour, fillOpacity, opts, tilt) {
var rot = -rotation * Math.PI / 180;
var points = [];
var latConv = google.maps.geometry.spherical.computeDistanceBetween(point, new google.maps.LatLng(point.lat() + 0.1, point.lng())) * 10;
var lngConv = google.maps.geometry.spherical.computeDistanceBetween(point, new google.maps.LatLng(point.lat(), point.lng() + 0.1)) * 10;
var step = (360 / vertexCount) || 10;
var flop = -1;
if (tilt) {
var I1 = 180 / vertexCount;
} else {
var I1 = 0;
}
for (var i = I1; i <= 360.001 + I1; i += step) {
var r1a = flop ? r1 : r3;
var r2a = flop ? r2 : r4;
flop = -1 - flop;
var y = r1a * Math.cos(i * Math.PI / 180);
var x = r2a * Math.sin(i * Math.PI / 180);
var lng = (x * Math.cos(rot) - y * Math.sin(rot)) / lngConv;
var lat = (y * Math.cos(rot) + x * Math.sin(rot)) / latConv;
points.push(new google.maps.LatLng(point.lat() + lat, point.lng() + lng));
}
return (new google.maps.Polygon({
paths: points,
strokeColor: strokeColour,
strokeWeight: strokeWeight,
strokeOpacity: Strokepacity,
fillColor: fillColour,
fillOpacity: fillOpacity
}))
}html,
body,
#areas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="areas"></div>