javascript - 如何制作 Google Maps API v3 六边形平铺 map ，最好是基于坐标的 map ？

Question

http://econym.org.uk/gmap/example_eshapes.htm有一个关于如何平铺六边形的 Google Maps API v2 示例，尽管实现规模很痛苦:它有一个中心六边形，然后在适当的方向上与它相邻的六个六边形，然后(在准递归中)三个六边形与其中一个相邻与原始六边形相邻的六边形。它有一个带有透明填充的漂亮边框。

我如何创建类似的效果，但最好使用平铺，以便我指定(没有递归堆)我想要一个在原点以东六个六边形的瓷砖和四个六边形从瓷砖六向东以北 60° 的六边形六边形向东？

我正在寻找基于坐标且最好是简单的东西。我查看了 http://www.rootmetrics.com/check-coverage/ 的来源它有效，但代码与他们的特定页面、标记等耦合，因此模仿他们的代码需要一些理清。

Answer 1

以下示例演示了如何呈现水平六边形网格:

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,startPosition,radius,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, radius, 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;
}

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=geometry"></script>
<div id="map-canvas"></div>