Как нарисовать овальную форму на Google Maps V3?

Question

Я пытаюсь «нарисовать» овальную форму на 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(); 

Answer 1

Один из вариантов (который на самом деле то, что вы делаете, но с более высоким разрешением) будет использовать версию Mike Williams' eshapes library портирована на v3.

• связанный с этим вопрос: Google maps - draw ellipse based off 4 coordinates

proof of concept fiddle

фрагмент кода:

/* 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>