给定中心点和尺寸绘制一个矩形 google.maps.Polygon

Question

我正在开发一个 PHP 脚本，它接受 XML 输入，解析它然后显示（最终旋转的）矩形和椭圆区域。

因为区域可以旋转，所以我必须使用google.maps.Polygon而不是Rectangle。

为了处理旋转，我希望使用 google-maps-polygon-rotate 库（该部分稍后出现）。

我的问题是：根据给定的 XML 输入，我只知道矩形中心点的坐标和区域的尺寸（宽度和高度）。

目前我只是将中心点显示为标记：

我的问题是：如何在只知道中心点的经纬度和宽高的情况下用google.maps.Polygon画一个矩形？

即如何计算4个端点的经纬度？

我可以在这里使用 google.maps.geometry.spherical.computeOffset() 方法吗？

Answer 1

一个选择是使用 Mike Williams' v2 Eshapes library

的 v3 移植版本

    // ==- Tilted rectangles ===
    var point = new google.maps.LatLng(44, -78);
    var tiltedRectangle1 = google.maps.Polygon.Shape(point, 50000, 10000, 50000, 10000, -60, 4, "#000000", 3, 1, "#ffffff", 1, {}, true);
    var tiltedRectangle2 = google.maps.Polyline.Shape(point, 50000, 10000, 50000, 10000, 30, 4, "#000000", 3, 1, {}, true);
    tiltedRectangle1.setMap(map);
    tiltedRectangle2.setMap(map);

函数google.maps.Polygon.Shape(point, 50000, 10000, 50000, 10000, -60, 定义了一个边长为 100000 米 x 20000 米并旋转了 -60 度的矩形，第二次调用定义了一个同样大小的旋转30度。

working fiddle

工作片段：

var map = null;

function initialize() {
    var myOptions = {
        zoom: 8,
        center: new google.maps.LatLng(44, -78),
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        navigationControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map"),
    myOptions);
    // ==- Tilted rectangles ===
    var point = new google.maps.LatLng(44, -78);
    var tiltedRectangle1 = google.maps.Polygon.Shape(point, 50000, 10000, 50000, 10000, -60, 4, "#000000", 3, 1, "#ffffff", 1, {}, true);
    var tiltedRectangle2 = google.maps.Polyline.Shape(point, 50000, 10000, 50000, 10000, 30, 4, "#000000", 3, 1, {}, true);
    tiltedRectangle1.setMap(map);
    tiltedRectangle2.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
// EShapes.js
//
// Based on an idea, and some lines of code, by "thetoy" 
//
//   This Javascript is provided by Mike Williams
//   Community Church Javascript Team
//   http://www.bisphamchurch.org.uk/   
//   http://econym.org.uk/gmap/
//
//   This work is licenced under a Creative Commons Licence
//   http://creativecommons.org/licenses/by/2.0/uk/
//
// Version 0.0 04/Apr/2008 Not quite finished yet
// Version 1.0 10/Apr/2008 Initial release
// Version 3.0 12/Oct/2011 Ported to v3 by Lawrence Ross

google.maps.Polyline.Shape = function (point, r1, r2, r3, r4, rotation, vertexCount, colour, weight, opacity, opts, tilt) {
    if (!colour) {
        colour = "#0000FF";
    }
    if (!weight) {
        weight = 4;
    }
    if (!opacity) {
        opacity = 0.45;
    }
    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.Polyline({
        path: points,
        strokeColor: colour,
        strokeWeight: weight,
        strokeOpacity: opacity
    }))
}
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
    }))
}

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

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk""></script>
<div id="map"></div>

Answer 2

我自己的回答（见下面截图）——先添加geometry库：

<script type="text/javascript" 
    src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry">
</script>

然后用它来创建矩形的角：

var NORTH = 0;
var WEST  = -90;
var SOUTH = 180;
var EAST  = 90;

function drawRect(map, lat, lng, width, height, color) {

        var center = new google.maps.LatLng(lat, lng);

        var north = google.maps.geometry.spherical.computeOffset(center, height / 2, NORTH); 
        var south = google.maps.geometry.spherical.computeOffset(center, height / 2, SOUTH); 

        var northEast = google.maps.geometry.spherical.computeOffset(north, width / 2, EAST); 
        var northWest = google.maps.geometry.spherical.computeOffset(north, width / 2, WEST); 

        var southEast = google.maps.geometry.spherical.computeOffset(south, width / 2, EAST); 
        var southWest = google.maps.geometry.spherical.computeOffset(south, width / 2, WEST); 

        var corners = [ northEast, northWest, southWest, southEast ];

        var rect = new google.maps.Polygon({
                paths: corners,
                strokeColor: color,
                strokeOpacity: 0.9,
                strokeWeight: 1,
                fillColor: color,
                fillOpacity: 0.3,
                map: map
        });
}

为了将矩形旋转 angle，我可能可以将它添加到 computeOffset() 调用的第二个参数中。还没试过。

给定中心点和尺寸绘制一个矩形 google.maps.Polygon

Draw a rectangle google.maps.Polygon given its center point and dimensions

google-maps

polygon

google-maps-api-3