使用 Google Map API v3 绘制多边形和获取坐标 [英] Polygon Drawing and Getting Coordinates with Google Map API v3

问题描述

我正在尝试使用 Google Maps API v3 开发应用程序.我想做的是；首先让用户在谷歌地图上绘制一个多边形并获取他/她的多边形坐标并将它们保存到数据库中.然后我将显示用户保存的坐标.

我不知道如何让用户使用 API v3 在 Google 地图上绘制多边形，然后获取坐标.如果我能得到这些坐标，就很容易将它们保存到数据库中.

http://gmaps-samples.googlecode.com/svn/trunk/poly/mymapstoolbar.html 几乎是确切的示例，但它使用 API v2 并且不提供坐标.我想使用 API v3 并且能够获取所有坐标.

是否有使用 API v3 绘制多边形并获取其坐标的示例?

解决方案

如果你只需要坐标，这里有一个我喜欢使用的绘图工具 - 移动多边形或重新塑造它，坐标将显示在地图:jsFiddle在这里.

此外，这里还有一个 Codepen

JS

var bermudaTriangle;函数初始化(){var myLatLng = new google.maps.LatLng(33.5190755, -111.9253654);var mapOptions = {缩放:12，中心:myLatLng，mapTypeId: google.maps.MapTypeId.RoadMap};var map = new google.maps.Map(document.getElementById('map-canvas'),地图选项);var 三角形坐标 = [新的 google.maps.LatLng(33.5362475, -111.9267386),新的 google.maps.LatLng(33.5104882, -111.9627875),新的 google.maps.LatLng(33.5004686, -111.9027061)];//构造多边形bermudaTriangle = 新的 google.maps.Polygon({路径:三角形坐标，可拖动:真实，可真实，中风颜色:'#FF0000'，中风不透明度:0.8，行程重量:2，填充颜​​色:'#FF0000'，填充不透明度:0.35});bermudaTriangle.setMap(map);google.maps.event.addListener(bermudaTriangle, "dragend", getPolygonCoords);google.maps.event.addListener(bermudaTriangle.getPath(), "insert_at", getPolygonCoords);google.maps.event.addListener(bermudaTriangle.getPath(), "remove_at", getPolygonCoords);google.maps.event.addListener(bermudaTriangle.getPath(), "set_at", getPolygonCoords);}函数 getPolygonCoords() {var len = bermudaTriangle.getPath().getLength();var htmlStr = "";for (var i = 0; i < len; i++) {htmlStr += bermudaTriangle.getPath().getAt(i).toUrlValue(5) + "
";}document.getElementById('info').innerHTML = htmlStr;}

HTML

<h3>拖动或重新调整坐标以显示在下方</h3><div id="map-canvas">

<div id="信息">

CSS

#map-canvas {宽度:自动；高度:350px；}#信息{位置:绝对；字体系列:arial、sans-serif；字体大小:18px；字体粗细:粗体；}

I'm trying to develop an application by using Google Maps API v3. What I'm trying to do is; first let the user draw a polygon on a Google Map and get his/her polygon's coordinates and save them into a database. I will then show the user saved coordinates.

I don't know how to let users draw polygon on a Google Map with API v3 and then get the coordinates. If I can get those coordinates, it's easy to save them into a database.

http://gmaps-samples.googlecode.com/svn/trunk/poly/mymapstoolbar.html is nearly the exact example but it uses API v2 and doesn't give coordinates. I want to use API v3 and be able to get all coordinates.

Is there any examples of drawing polygon and getting its coordinates with API v3?

解决方案

If all you need is the coordinates here is a drawing tool I like to use - move the polygon or re-shape it and the coordinates will display right below the map: jsFiddle here.

Also, here is a Codepen

JS

var bermudaTriangle;
function initialize() {
    var myLatLng = new google.maps.LatLng(33.5190755, -111.9253654);
    var mapOptions = {
        zoom: 12,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.RoadMap
    };

    var map = new google.maps.Map(document.getElementById('map-canvas'),
                                  mapOptions);


    var triangleCoords = [
        new google.maps.LatLng(33.5362475, -111.9267386),
        new google.maps.LatLng(33.5104882, -111.9627875),
        new google.maps.LatLng(33.5004686, -111.9027061)

    ];

    // Construct the polygon
    bermudaTriangle = new google.maps.Polygon({
        paths: triangleCoords,
        draggable: true,
        editable: true,
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35
    });

    bermudaTriangle.setMap(map);
    google.maps.event.addListener(bermudaTriangle, "dragend", getPolygonCoords);
    google.maps.event.addListener(bermudaTriangle.getPath(), "insert_at", getPolygonCoords);
    google.maps.event.addListener(bermudaTriangle.getPath(), "remove_at", getPolygonCoords);
    google.maps.event.addListener(bermudaTriangle.getPath(), "set_at", getPolygonCoords);
}

function getPolygonCoords() {
    var len = bermudaTriangle.getPath().getLength();
    var htmlStr = "";
    for (var i = 0; i < len; i++) {
        htmlStr += bermudaTriangle.getPath().getAt(i).toUrlValue(5) + "<br>";
    }
    document.getElementById('info').innerHTML = htmlStr;
}

HTML

<body onload="initialize()">
    <h3>Drag or re-shape for coordinates to display below</h3>
    <div id="map-canvas">
    </div>
    <div id="info">
    </div>
</body>

CSS

#map-canvas {
    width: auto;
    height: 350px;
}
#info {
    position: absolute;
    font-family: arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
}

这篇关于使用 Google Map API v3 绘制多边形和获取坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！