GoogleマップV3で楕円形を描くにはどうすればよいですか？

Question

私はGoogleマップ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

1つのオプションは、V3への移植Mike Williams' eshapes libraryのバージョンを使用することであろう。

• 関連する質問：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>