如何制作 Google Maps API v3 六边形平铺地图，最好是基于坐标的? [英] How can I make a Google Maps API v3 hexagon tiled map, preferably coordinate-based?

问题描述

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

http://econym.org.uk/gmap/example_eshapes.htm has a Google Maps API v2 example of how to tile hexagons, although the implementation scales painfully: it has a center hexagon, then six hexagons adjacent to it in the appropriate directions, then (in quasi-recursion) three hexagons adjacent to one of the hexagons adjacent to the original hexagon. And it has a nice border with transparent fill.

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

How can I create a similar effect, but preferably with tiling so that I specify (without mounds of recursion) that I want a tile six hexagons to the east of the origin and four hexagons 60° north of east from the tile six hexagons to the east?

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

I'm looking for something coordinate-based and preferably simple. I've looked at the source for http://www.rootmetrics.com/check-coverage/ and it works, but the code is coupled to their specific page, markup, etc., so imitating their code would take a bit of untangling.

推荐答案

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

The following example demonstrates how to render horizontal hexagons grid:

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>

这篇关于如何制作 Google Maps API v3 六边形平铺地图，最好是基于坐标的?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！