gpt4 book ai didi

google-maps - Google Maps API 旋转矩形

转载 作者:行者123 更新时间:2023-12-04 09:32:37 50 4
gpt4 key购买 nike

我有一个应用程序,它使用 JavaScript API 版本 3 在 Google map 上绘制一个矩形数组。这可行,但我想做的是旋转或倾斜每个 Rectangle基于用户输入。

Rectangle对象仅限于水平/垂直线? API 仅将两个角点作为位置,因此我看不到任何旋转这种形状的方法。

我实际上是否必须将形状类型更改为 Polygon ?

最佳答案

Do I in fact have to change the shape type to Polygon?



是的,因为 google.maps.Rectangle class不支持设置四个顶点的坐标( setBounds函数只支持设置 northeastsouthwest坐标)

下面的示例演示了如何:
  • 从矩形对象创建一个多边形并将其显示在 map 上而不是矩形
  • 旋转多边形

  • 工作示例

    function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: { lat: 33.678, lng: -116.243 },
    mapTypeId: google.maps.MapTypeId.TERRAIN
    });

    var rectangle = new google.maps.Rectangle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    bounds: {
    north: 33.685,
    south: 33.671,
    east: -116.224,
    west: -116.251
    }
    });

    var rectPoly = createPolygonFromRectangle(rectangle); //create a polygom from a rectangle

    rectPoly.addListener('click', function(e) {
    rotatePolygon(rectPoly,10);
    });


    document.getElementById('btnRotate').onclick = function() {
    window.setInterval(function() {
    rotatePolygon(rectPoly, 10);
    }, 500);
    };
    }



    function createPolygonFromRectangle(rectangle) {
    var map = rectangle.getMap();

    var coords = [
    { lat: rectangle.getBounds().getNorthEast().lat(), lng: rectangle.getBounds().getNorthEast().lng() },
    { lat: rectangle.getBounds().getNorthEast().lat(), lng: rectangle.getBounds().getSouthWest().lng() },
    { lat: rectangle.getBounds().getSouthWest().lat(), lng: rectangle.getBounds().getSouthWest().lng() },
    { lat: rectangle.getBounds().getSouthWest().lat(), lng: rectangle.getBounds().getNorthEast().lng() }
    ];

    // Construct the polygon.
    var rectPoly = new google.maps.Polygon({
    path: coords
    });
    var properties = ["strokeColor","strokeOpacity","strokeWeight","fillOpacity","fillColor"];
    //inherit rectangle properties
    var options = {};
    properties.forEach(function(property) {
    if (rectangle.hasOwnProperty(property)) {
    options[property] = rectangle[property];
    }
    });
    rectPoly.setOptions(options);

    rectangle.setMap(null);
    rectPoly.setMap(map);
    return rectPoly;
    }


    function rotatePolygon(polygon,angle) {
    var map = polygon.getMap();
    var prj = map.getProjection();
    var origin = prj.fromLatLngToPoint(polygon.getPath().getAt(0)); //rotate around first point

    var coords = polygon.getPath().getArray().map(function(latLng){
    var point = prj.fromLatLngToPoint(latLng);
    var rotatedLatLng = prj.fromPointToLatLng(rotatePoint(point,origin,angle));
    return {lat: rotatedLatLng.lat(), lng: rotatedLatLng.lng()};
    });
    polygon.setPath(coords);
    }

    function rotatePoint(point, origin, angle) {
    var angleRad = angle * Math.PI / 180.0;
    return {
    x: Math.cos(angleRad) * (point.x - origin.x) - Math.sin(angleRad) * (point.y - origin.y) + origin.x,
    y: Math.sin(angleRad) * (point.x - origin.x) + Math.cos(angleRad) * (point.y - origin.y) + origin.y
    };
    }
    html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    }

    #map {
    height: 100%;
    }

    #floating-panel {
    position: absolute;
    top: 10px;
    left: 25%;
    z-index: 5;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #999;
    text-align: center;
    font-family: 'Roboto','sans-serif';
    line-height: 30px;
    padding-left: 10px;
    }
    <div id="floating-panel"><input type="button" id="btnRotate" value="Auto Rotate"></div>
    <div id="map"></div>
    <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>


    JSFiddle

    关于google-maps - Google Maps API 旋转矩形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26049552/

    50 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com