javascript – 如何制作Google Maps API v3六边形平铺地图,最好是基于坐标？

http://econym.org.uk/gmap/example_eshapes.htm有一个关于如何平铺六边形的Google Maps API v2示例,虽然实现可以很大程度地缩放：它有一个中心六边形,然后在适当的方向上与它相邻的六个六边形,然后(在准递归中)与其中一个相邻的三个六边形与原六边形相邻的六边形.它有一个漂亮的边框与透明填充.

我怎样才能创建一个类似的效果,但最好是使用平铺,这样我就可以指定(没有递归的堆)我想要在原点的东边有一个六六边形的六边形和四边六边形从东边的六个六边形到六边形的六边形到东？

我正在寻找基于坐标的东西,最好是简单的.我已经查看了http://www.rootmetrics.com/check-coverage/的源代码并且它可以工作,但代码与它们的特定页面,标记等相关联,因此模仿它们的代码需要一些解决.

最佳答案

以下示例演示如何渲染水平六边形网格：

function initialize() {
    var mapOptions = {
        zoom: 7,mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
    var startPosition = new google.maps.LatLng(33.748589,-84.390392);  //Atlanta,GA,USA 
    var radius = 40 * 1000; //radius in meters
    drawHorizontalHexagonGrid(map,startPosition,radius,6);
    map.setCenter(startPosition);
}

function drawHorizontalHexagonGrid(map,count){
    var curPos = startPosition;
    var width = radius * 2 * Math.sqrt(3)/2 ; 
    for(var i = 0;i < count; i++){
        drawHorizontalHexagon(map,curPos,radius);
        curPos = google.maps.geometry.spherical.computeOffset(curPos,width,90);   
    }
}

function drawHorizontalHexagon(map,position,radius){
    var coordinates = [];
    for(var angle= 0;angle < 360; angle+=60) {
       coordinates.push(google.maps.geometry.spherical.computeOffset(position,angle));    
    }
  
    // Construct the polygon.
    var polygon = new google.maps.polygon({
        paths: coordinates,strokeColor: '#FF0000',strokeOpacity: 0.8,strokeWeight: 2,fillColor: '#FF0000',fillOpacity: 0.35
    });
    polygon.setMap(map);
    map.setCenter(position);
}

google.maps.event.addDomListener(window,'load',initialize);

html,body,#map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px;
}