Нарисуйте Hexagon на основе почтового индекса на карте google?

Question

Я хочу нарисовать многоугольник шестиугольника на карте google на основе почтового индекса (single lat, long). Как я могу получить другой lat long, поэтому я могу передать его в многоугольный массив на основе одиночного lat long. Он также будет основан на любом радиусе, например. 15 миль или 15 км.

Образец изображения карты Google.

Answer 1

Один из вариантов - использовать код от Майка Уильямса eshapes портирован на v3.

proof of concept fiddle

из его документации для RegularPoly:

участки правильный многоугольник (например, пятиугольник, квадрат, восьмиугольник) с указанным центром, радиусом, числом вершин и вращения.

Параметры

• центр LatLng формы
• радиус Длина радиуса в метрах
• vertexCount число вершин, например 5 для пентагона
• Вращение Степени вращения. При нулю или опущен южный край формы горизонтально
• цвета параметр цвета для ломаной линии
• веса Параметр Вес для полилинии
• непрозрачности параметр Непрозрачность для полилинии
• выбирает параметр Options для полилинии

фрагмент кода:

var geocoder = new google.maps.Geocoder(); 
 
var map; 
 

 
function initialize() { 
 
    map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 10, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 

 
    codeAddress("Atlanta, GA"); 
 
} 
 

 
function codeAddress(address) { 
 
    geocoder.geocode({ 
 
    'address': address 
 
    }, function(results, status) { 
 
    if (status == google.maps.GeocoderStatus.OK) { 
 
     map.setCenter(results[0].geometry.location); 
 
     // === Hexagon === 
 
     var point = results[0].geometry.location; 
 
     var hex1 = google.maps.Polygon.RegularPoly(point, 25000, 6, 60, "#000000", 1, 1, "#ff0000", 0.5); 
 
     hex1.setMap(map); 
 
    } else { 
 
     alert("Geocode was not successful for the following reason: " + status); 
 
    } 
 
    }); 
 
} 
 

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

 
// original code from Mike Williams' eshapes.js 
 
// http://econym.org.uk/gmap/eshapes.htm 
 
// ported to the Google Maps Javascript API v3 
 
google.maps.Polygon.RegularPoly = function(point, radius, vertexCount, rotation, strokeColour, strokeWeight, Strokepacity, fillColour, fillOpacity, opts) { 
 
    rotation = rotation || 0; 
 
    var tilt = !(vertexCount & 1); 
 
    return google.maps.Polygon.Shape(point, radius, radius, radius, radius, rotation, vertexCount, strokeColour, strokeWeight, Strokepacity, fillColour, fillOpacity, opts, tilt) 
 
} 
 
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 
 
    })) 
 
} 
 

 
function EOffset(point, easting, northing) { 
 
    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; 
 
    return new google.maps.LatLng(point.lat() + northing/latConv, point.lng() + easting/lngConv) 
 
} 
 

 
function EOffsetBearing(point, dist, bearing) { 
 
    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 lat = dist * Math.cos(bearing * Math.PI/180)/latConv; 
 
    var lng = dist * Math.sin(bearing * Math.PI/180)/lngConv; 
 
    return new google.maps.LatLng(point.lat() + lat, point.lng() + lng) 
 
}

html, 
 
body, 
 
#map_canvas { 
 
    height: 500px; 
 
    width: 500px; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script> 
 
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>

Answer 2

Можно рассчитать и начертить площадь шестиугольник на основе LAT/LNG, используя следующий подход:

function drawHexagon(map,position,radius){ 
    var coordinates = []; 
    for(var angle= -90;angle < 270; 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); 
} 

Полный пример

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

 
    var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions); 
 
    var position = new google.maps.LatLng(33.748589, -84.390392); //Atlanta, GA, USA 
 
    var radius = 50 * 1000; //radius in meters 
 
    drawHexagon(map,position,radius); 
 
} 
 

 

 

 
function drawHexagon(map,position,radius){ 
 
    var coordinates = []; 
 
    for(var angle= -90;angle < 270; 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>