Нарисуйте многоугольник с помощью мыши на картах google

Мне нужно нарисовать многоугольник с помощью мыши и отметить определенную область на картах Google. Цель состоит в том, чтобы отметить область на картах Google, а затем показывать отели и достопримечательности в этом районе. Пользователь будет отмечать отели на карте Google, создавая их, чтобы у db была широта и долгота.

Как рисовать многоугольник и заливать его цветом в качестве фона, чтобы отметить область в Картах Google? Я прочитал Руководство API "Как рисовать полигоны?" в основном вам нужно будет отметить несколько точек, а затем объединить их в многоугольник. Но мне нужно будет сделать это с помощью мыши, как рисование фигуры. Пожалуйста, помогите мне, как этого добиться.

Ответы

Ответ 1

вы можете использовать инструменты редактирования полигона Google MyMaps в своем приложении, возможно, это будет нормально для вас?

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

Однако, если вы хотите реализовать это самостоятельно, это в основном следующее:

добавить клик для отображения.

повтор: точки хранения, которые пользователь нажимает в массиве, и добавить маркер в этот момент. если это первый маркер, добавьте в него клик для подписчиков

когда пользователь нажимает на первый маркер, разбор использует массив точек для создания вашего полигона

У меня нет кода, чтобы показать вам, но я реализовал это сам в предыдущей компании, так что это можно сделать:)

Ответ 2

Вот код (для API Google Maps JavaScript версии 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);
    });
});

Ответ 3

В Google Maps 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

Ответ 4

Вы можете проверить Элементы управления геометрии GMaps Utility Library.

Для получения дополнительной информации вам может понадобиться пройти GeometryControls Reference.

Ответ 5

Новый Map Engines Lite - именно тот инструмент, который вы ищете, я думаю: https://mapsengine.google.com/map/

Ответ 6

Существует порт API-интерфейсов API v2 для API v3 @http://nettique.free.fr/gmap/toolbar.html

Ответ 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);
        })
    });
});

Ответьте на новый код, отправленный по старому вопросу, в случае, если кто-то еще попадет сюда!

Ответ 8

Я сделал для себя пример. код ниже, а также доступен jsfiddle

<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, если вы хотите показать диспетчер чертежей

Ответ 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>

Выход: