使用鼠標在Google地圖上繪製多邊形

Question

我需要使用鼠標繪製多邊形並在Google地圖上標記特定區域。目的是在谷歌地圖上標記一個區域，然後顯示該地區的酒店和景點。用戶將在Google地圖上標記酒店，同時創建它們，以便分貝具有經度和緯度。

如何繪製多邊形並使用顏色填充顏色作爲背景以標記Google地圖中的區域？我已閱讀API手冊「如何繪製多邊形？」基本上你需要標記多個點，然後將它們組合成一個多邊形。但我需要使用鼠標拖動來完成此操作，就像繪製一個形狀一樣。請幫助我如何實現這一目標。

Answer 1

您可以在您的應用程序中使用Google MyMaps多邊形編輯工具，也許這對您會好嗎？

看到http://googlemapsapi.blogspot.com/2008/05/love-my-maps-use-its-line-and-shape.html

但是，如果你想這個自己實現它基本上是這樣的：

添加點擊監聽器映射。

重複： 用戶在數組中點擊的存儲點，並在此處添加標記。 如果它是第一個標記添加點擊監聽到它

當用戶點擊第一個標記，使用解析點的陣列來構建多邊形

我沒有任何代碼來告訴你，但我已經在以前的公司中實現了這一點，所以可以這樣做:)

Answer 2

您可能想查看GMaps Utility Library的Geometry Controls。

有關進一步參考，您可能想要通過GeometryControls Reference。

Answer 3

下面是一些代碼（適用於Google Maps JavaScript API版本3），它可以實現您想要的功能。它支持：

• 單擊以追加頂點。
• 再次點擊第一個頂點關閉路徑。
• 拖動頂點。

這是無證的，但希望你可以看到它很容易做什麼。

$(document).ready(function() { 
    var map = new google.maps.Map(document.getElementById('map'), { center: new google.maps.LatLng(21.17, -86.66), zoom: 9, mapTypeId: google.maps.MapTypeId.HYBRID, scaleControl: true }); 
    var isClosed = false; 
    var poly = new google.maps.Polyline({ map: map, path: [], strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: 2 }); 
    google.maps.event.addListener(map, 'click', function (clickEvent) { 
     if (isClosed) 
      return; 
     var markerIndex = poly.getPath().length; 
     var isFirstMarker = markerIndex === 0; 
     var marker = new google.maps.Marker({ map: map, position: clickEvent.latLng, draggable: true }); 
     if (isFirstMarker) { 
      google.maps.event.addListener(marker, 'click', function() { 
       if (isClosed) 
        return; 
       var path = poly.getPath(); 
       poly.setMap(null); 
       poly = new google.maps.Polygon({ map: map, path: path, strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.35 }); 
       isClosed = true; 
      }); 
     } 
     google.maps.event.addListener(marker, 'drag', function (dragEvent) { 
      poly.getPath().setAt(markerIndex, dragEvent.latLng); 
     }); 
     poly.getPath().push(clickEvent.latLng); 
    }); 
}); 

Answer 4

的谷歌地圖的JavaScript API v3提供的繪圖庫，http://code.google.com/apis/maps/documentation/javascript/overlays.html#drawing_tools

你只需要啓用繪圖工具（如在文檔中的例子），並添加事件偵聽器用於創建疊加的類型（如「繪圖事件」部分所示）。

其使用的一個簡單的例子是：http://gmaps-samples-v3.googlecode.com/svn/trunk/drawing/drawing-tools.html

Answer 5

還有的API V2繪圖工具API V3 @http://nettique.free.fr/gmap/toolbar.html

Answer 6

端口新地圖引擎精簡版正是你要尋找的工具因爲我認爲：https://mapsengine.google.com/map/

Answer 7

自從首次提出這個問題以來，google.maps.polygon已經有了一些重大改進。這是一個簡單的實現，使用所有本地google.maps v3工具。 （注：有一個靠不住的JavaScript的工作範圍在這裏...但它的工作...）

var listener1 = google.maps.event.addListener(map, "click", function(e) { 
    var latLng = e.latLng; 
    var myMvcArray = new google.maps.MVCArray(); 
    myMvcArray.push(latLng); // First Point 
    var myPolygon = new google.maps.Polygon({ 
     map: map, 
     paths: myMvcArray, // one time registration reqd only 
     strokeColor: "#FF0000", 
     strokeOpacity: 1.0, 
     strokeWeight: 2, 
     fillColor: "#FF0000", 
     fillOpacity: 0.10, 
     editable: true, 
     draggable: false, 
     clickable: true 
    }); 
    google.maps.event.removeListener(listener1); 

    var listener2 = google.maps.event.addListener(map, 'click', function(e) { 
     latLng = e.latLng; 
     myMvcArray.push(latLng); 
     myMvcArray.getArray().forEach(function(value, index) { 
      console.log(" index: " + index + " value: " + value); 
     }) 
    }); 
}); 

回答與任何人的情況下提交了關於老問題，新的代碼被人得到這裏！

Answer 8

我爲自己做了一個例子。代碼下方，也可的jsfiddle是avaible

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=drawing&callback=initMap" async defer></script> 

<script> 

function initMap() { 
var map = new google.maps.Map(document.getElementById('map'), { 
center: { 
    lat: -34.397, 
    lng: 150.644 
}, 
zoom: 8 
}); 

var drawingManager = new google.maps.drawing.DrawingManager({ 
drawingMode: google.maps.drawing.OverlayType.POLYGON, 
drawingControl: false, 
drawingControlOptions: { 
    position: google.maps.ControlPosition.TOP_CENTER, 
    drawingModes: ['polygon', 'circle'] 
}, 
polygonOptions: { 
    editable: true 
} 

}); 
drawingManager.setMap(map); 

google.maps.event.addListener(drawingManager, 'overlaycomplete', 
function(event) { 
event.overlay.set('editable', false); 
drawingManager.setMap(null); 
console.log(event.overlay); 
}); 

} 
</script> 

https://jsfiddle.net/zgmdvsrz/

你可以設置drawingcontrol爲true，如果你想顯示描繪管理

Answer 9

我用下面的代碼來繪製地圖

上多邊形

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<meta charset="UTF-8"> 
<title>Drawing Tools</title> 

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=drawing"></script> 
<style type="text/css"> 
    #map, html, body { 
    padding: 0; 
    margin: 0; 
    height: 100%; 
    } 
    #panel { 
    width: 200px; 
    font-family: Arial, sans-serif; 
    font-size: 13px; 
    float: right; 
    margin: 10px; 
    } 
    #color-palette { 
    clear: both; 
    } 
    .color-button { 
    width: 14px; 
    height: 14px; 
    font-size: 0; 
    margin: 2px; 
    float: left; 
    cursor: pointer; 
    } 
    #delete-button { 
    margin-top: 5px; 
    } 
    #map_canvas { 
    height: 100%; 
    width: 100%; 
    margin: 0px; 
    padding: 0px 
} 

</style> 
<script type="text/javascript"> 
var geocoder; 
var map; 
var all_overlays = []; 

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

var polyOptions = { 
    strokeWeight: 0, 
    fillOpacity: 0.45, 
    editable: true, 
    fillColor: '#FF1493' 
    }; 
var selectedShape; 

var drawingManager = new google.maps.drawing.DrawingManager({ 
      drawingMode: google.maps.drawing.OverlayType.POLYGON, 
      drawingControl: false, 
      markerOptions: { 
      draggable: true 
     }, 
    polygonOptions: polyOptions 
    }); 

    $('#enablePolygon').click(function() { 
     drawingManager.setMap(map); 
     drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON); 
    }); 

    $('#resetPolygon').click(function() { 
     if (selectedShape) { 
      selectedShape.setMap(null); 
      } 
     drawingManager.setMap(null); 
     $('#showonPolygon').hide(); 
     $('#resetPolygon').hide(); 
    }); 

    google.maps.event.addListener(drawingManager, 'polygoncomplete', 

    function(polygon) { 
     // var area = google.maps.geometry.spherical.computeArea(selectedShape.getPath()); 
     // $('#areaPolygon').html(area.toFixed(2)+' Sq meters'); 
     $('#resetPolygon').show(); 
    }); 

    function clearSelection() { 
     if (selectedShape) { 
      selectedShape.setEditable(false); 
      selectedShape = null; 
     } 
    } 


    function setSelection(shape) { 
      clearSelection(); 
      selectedShape = shape; 
      shape.setEditable(true); 
    } 

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) { 
all_overlays.push(e); 
if (e.type != google.maps.drawing.OverlayType.MARKER) { 
    // Switch back to non-drawing mode after drawing a shape. 
    drawingManager.setDrawingMode(null); 

    // Add an event listener that selects the newly-drawn shape when the user 
    // mouses down on it. 
    var newShape = e.overlay; 
    newShape.type = e.type; 
    google.maps.event.addListener(newShape, 'click', function() { 
    setSelection(newShape); 
    }); 
    setSelection(newShape); 
    } 
}); 

google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) { 
var coordinates = (polygon.getPath().getArray()); 
console.log(coordinates); 
alert(coordinates); 
}); 
} 
google.maps.event.addDomListener(window, "load", initialize); 
</script> 
</head> 
    <body> 
    <input type="button" id="enablePolygon" value="Calculate Area" /> 
    <input type="button" id="resetPolygon" value="Reset" style="display: none;" /> 
    <div id="showonPolygon" style="display:none;"><b>Area:</b> <span 
    id="areaPolygon">&nbsp;</span></div> 
    <div id="map_canvas"></div> 
    </html> 

輸出：