как создать полилинию в Google Map v3, и сделать его enableDrawing

Question

этот код находится в v2:

var polyline = new GPolyline([point1,point2], "#ff0000", 5); 
map.addOverlay(polyline); 
polyline.enableDrawing(); 

и как делать в v3 ??

благодаря

Answer 1

К сожалению enableDrawing/enableEditing не поддерживаются v3. Там есть feature request for it in bugtracker.

Можно реализовать его самостоятельно (см., Например, this demo), но делать это так же, как и в v2, не является тривиальным.

Я в настоящее время ищу решение этой проблемы самостоятельно. До сих пор я нашел только одну реализацию, которая выглядит как минимум многообещающая: Polyline-enableEditing-enableDrawing-for-GMaps-API-v3.

Answer 2

Было больно реализовать, но это возможно. Я использовал шаблон состояния для отслеживания процесса оцифровки. Я использовал EXT JS, поэтому я пытаюсь включить вещи, которые являются строго javascript. Нажав на кнопку, объект оцифровки будет отслеживать, был ли я ДИГИТИТИРОВАН, или NOT_DIGITIZING или EDITING. Состояние также будет отслеживать, какой тип геометрии я должен обрабатывать: POINT, POLYLINE, POLYGON. Кнопки были доступны для установки состояния. Я хотел бы захватить щелчки карту с:

google.maps.event.addListener(map,"click",digitizer.onDigitize.createDelegate(digitizer)); 
google.maps.event.addListener(map,"dblclick",digitizer.endDigitize.createDelegate(digitizer)); 

Внутри объекта дигитайзер, я отслеживал оцифровку полигона и точек. Всякий раз, когда пользователь щелкал, я отправлял latLng внутри события на отслеживаемый объект.

this.digitizedGeometry.getPath().push(e.latLng); 

Это будет работать как для полилинии, так и для полигона. Я только проследил простую топологию, а не пончики или несколько геометрий.

Редактирование и удаление точек было сложнее.

Сначала мне пришлось отслеживать, выбрал ли пользователь геометрию, которая была POLYLINE или POLYGON, и поместив эту геометрию в переменную editGeometry в дигитайзере и включив кнопку для редактирования.

Я проехал по пути редактирования геометрии и добавил маркеры и маркеры средней точки с разными стилями, гарантируя, что маркеры перетаскиваются.

var path = this.editGeometry.getPath(); 
for (var i = 0; i < path.getLength(); i++) { 
    // Add point geometry markers 
    var point = path.getAt(i); 
    var latLng = new google.maps.LatLng(point.lat(), point.lng()); 
    var markerOptions = {position: latLng, map: mapPanel.getMap()}; 
    Ext.apply(markerOptions, digitizer.markerStyle); 
    var marker = new google.maps.Marker(markerOptions); 

    // Used to track the latLng associated with the marker when position changes. 
    marker.edit = { 
     path: path, 
     position: i, 
     isMidpoint: false 
    }; 
    google.maps.event.addListener(marker, "dragend", digitizer.applyMarkerEdit.createDelegate(mapPanel, marker, true)); 
    google.maps.event.addListener(marker, "rightclick", digitizer.onContextMenu.createDelegate(mapPanel, marker, true)); 
    digitizer.editHandles.push(marker); 

    // determine the midpoint 
    var nextValue = (i+1) % path.getLength(); 
    var otherPoint = path.getAt(nextValue); 

    var latLng = new google.maps.LatLng((point.lat() + otherPoint.lat())/2.0, (point.lng() + otherPoint.lng())/2.0); 
    var markerOptions = {position: latLng, map: mapPanel.getMap()}; 
    Ext.apply(markerOptions, digitizer.midpointMarkerStyle); 
    var marker = new google.maps.Marker(markerOptions); 

    marker.edit = { 
     path: path, 
     position: i, 
     isMidpoint: true 
    }; 
    google.maps.event.addListener(marker, "dragend", digitizer.applyMarkerEdit.createDelegate(mapPanel, marker, true)); 
    digitizer.editHandles.push(marker); 
} 

Ключевая часть - «dragend» и применение редактирования. Если бы это была фактическая точка в пути, я бы переместил точку и переопределил средние точки.

marker.edit.path.setAt(marker.edit.position, e.latLng); 

// Adjust midpoints 
var index = handles.indexOf(marker); 
var prev = (index - 2 + handles.length) % handles.length; 
var mpprev = (index - 1 + handles.length) % handles.length; 
var next = (index + 2) % handles.length; 
var mpnext = (index + 1) % handles.length; 
var prevMarker = handles[prev]; 
var nextMarker = handles[next]; 
var prevMpMarker = handles[mpprev]; 
var nextMpMarker = handles[mpnext]; 
prevMpMarker.setPosition(new google.maps.LatLng((e.latLng.lat() + prevMarker.getPosition().lat())/2.0, (e.latLng.lng() + prevMarker.getPosition().lng())/2.0)); 
nextMpMarker.setPosition(new google.maps.LatLng((e.latLng.lat() + nextMarker.getPosition().lat())/2.0, (e.latLng.lng() + nextMarker.getPosition() 

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

Надеюсь, у вас будет некоторое представление о том, как это сделать. Слишком плохо, вместо двух строк кода, 200 строк кода, но это дает вам гибкость в том, что нужно делать, включая настройку стиля маркера.

Answer 3

С Maps API v3.7 эта функция, наконец, поддерживается !!

http://code.google.com/p/gmaps-api-issues/wiki/JavascriptMapsAPIv3Changelog