给出一个矩形google.maps.Polygon给出它的中心点和尺寸

时间:2015-02-02 17:40:37

标签: google-maps google-maps-api-3 polygon

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

由于区域可以旋转,我必须使用google.maps.Polygon而不是Rectangle

为了处理旋转,我希望使用google-maps-polygon-rotate库(后面会有这个部分)。

我的问题是:从给定的XML输入中我只知道矩形中心点的坐标和区域的尺寸(宽度和高度)。

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

screenshot

我的问题是:当只知道中心点的纬度和经度以及宽度,高度时,如何用google.maps.Polygon绘制一个矩形?

即。如何计算4个端点的纬度和经度?

我可以在这里以某种方式使用google.maps.geometry.spherical.computeOffset()方法吗?

2 个答案:

答案 0 :(得分:3)

一种选择是使用v3移植版本的Mike Williams' v2 Eshapes library

    // ==- 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);

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
    }))
}
&#13;
html, body, #map {
    height: 100%;
    width: 100% margin: 0px;
    padding: 0px
}
&#13;
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="map" style="border: 2px solid #3872ac;"></div>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

我自己的答案(见下面的截图) - 首先添加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
        });
}

screenshot

要用angle旋转矩形,我可能会将它添加到computeOffset()调用的第二个参数中。还没有尝试过。