Jquery 如何在谷歌地图V3上绘制椭圆形?

Jquery 如何在谷歌地图V3上绘制椭圆形?,jquery,google-maps,Jquery,Google Maps,我试图在谷歌地图V3上“画”一个椭圆形。我似乎真的找不到一个简单的方法来做这件事 目前,我正在使用一系列多边形进行此操作,但正如您从我的照片中所看到的,这样做会使制作“平滑”椭圆形成为一项困难的任务 有更好的方法吗 这就是我目前的情况:- /* Google Map - Areas we cover */ var center = new google.maps.LatLng(51.2576646,-0.3258271); function initialize() { var w

我试图在谷歌地图V3上“画”一个椭圆形。我似乎真的找不到一个简单的方法来做这件事

目前,我正在使用一系列多边形进行此操作,但正如您从我的照片中所看到的,这样做会使制作“平滑”椭圆形成为一项困难的任务

有更好的方法吗

这就是我目前的情况:-

/* 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();
一个选择(这确实是您正在做的,但分辨率更高)是使用一个版本的ported to v3

  • 相关问题:

代码片段:

/*谷歌地图-我们涵盖的领域*/
var center=newgoogle.maps.LatLng(51.2576646,-0.3258271);
函数初始化(){
var w=Math.max(document.documentElement.clientWidth,window.innerWidth | | 0);
var isDraggable=w>480?真:假;
变量映射选项={
缩放:7,
中心:中心,,
滚轮:错误,
可拖动:可拖动,
disableDefaultUI:true,
动物控制:正确
};
var map=new google.maps.map(document.getElementById('areas'),
地图选项);
变量样式=[{
“特色类型”:“景观。人造”,
“elementType”:“geometry.fill”,
“造型师”:[{
“饱和度”:“-63”
}, {
“轻盈”:“23”
}]
}, {
“特色类型”:“景观。自然”,
“elementType”:“geometry.fill”,
“造型师”:[{
“饱和度”:“-100”
}, {
“亮度”:“25”
}]
}, {
“特征类型”:“景观、自然、地形”,
“elementType”:“geometry.fill”,
“造型师”:[{
“饱和度”:“0”
}]
}, {
“功能类型”:“poi.park”,
“elementType”:“geometry.fill”,
“造型师”:[{
“饱和度”:“0”
}, {
“颜色”:“#95bf97”
}, {
“轻盈”:“59”
}]
}, {
“特色类型”:“重点学校”,
“elementType”:“geometry.fill”,
“造型师”:[{
“亮度”:“5”
}, {
“色调”:“ff0000”
}, {
“饱和度”:“-100”
}]
}, {
“功能类型”:“poi.sports_complex”,
“elementType”:“geometry.fill”,
“造型师”:[{
“亮度”:“5”
}, {
“饱和度”:“-100”
}]
}, {
“功能类型”:“road.local”,
“elementType”:“geometry.fill”,
“造型师”:[{
“饱和度”:“-85”
}, {
“亮度”:“12”
}]
}];
var bounds=new google.maps.LatLngBounds();
//面积圆多边形
变量坐标=[
新google.maps.LatLng(51.522416,-0.142822),
新google.maps.LatLng(51.426614,-0.845947),
新google.maps.LatLng(51.303145,-1.109619),
新的google.maps.LatLng(51.110420,-1.252441),
新google.maps.LatLng(50.958427,-1.065674),
新google.maps.LatLng(50.833698,-0.681152),
新google.maps.LatLng(50.785102,-0.043945),
新的google.maps.LatLng(50.840636,0.362549),
新的google.maps.LatLng(50.965346,0.845947),
新的google.maps.LatLng(51.110420,0.966797),
新的google.maps.LatLng(51.296276,0.966797),
新的google.maps.LatLng(51.412912,0.747070),
新的google.maps.LatLng(51.522416,0.010986),
新google.maps.LatLng(51.522416,-0.109863)
];
对于(变量i=0;i