Рисование ломаной линии похож на рисунок полилинии в DrawingManager

-1

Это как я рисую мой полилинии, где я нажимаю первую точку и полилиния рисуется после я нажимаю вторую точку на карте холста:Рисование ломаной линии похож на рисунок полилинии в DrawingManager

Sample google.maps.Polyline

Это как полилинии обращается с DrawingManager:

Sample Drawing Manager

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

Thanks,

источник

2016-01-07 user2618844

Как выглядит ваш код до сих пор? – duncan

Почему вы не можете использовать DrawingManager, если это делает то, что вы хотите? Вы можете удалить элементы управления. – geocodezip

Я не могу использовать DrawingManager, потому что моя пользовательская полилиния имеет метки и метки, привязанные к ней. – user2618844

Это работает для меня, одна важная деталь указывала clickable: false при построении полилинии, иначе она не зарегистрировала событие щелчка на карте.

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>Complex Polylines</title> 
    <style> 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
     #map { 
     height: 100%; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="map"></div> 
    <script> 
var poly; 
var map; 
var existingPolylinePath; 
var tempPoly; 

function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 7, 
    center: {lat: 41.879, lng: -87.624} // Center the map on Chicago, USA. 
    }); 

    poly = new google.maps.Polyline({ 
    strokeColor: '#000000', 
    strokeOpacity: 1.0, 
    strokeWeight: 3, 
    map: map, 
    clickable: false 
    }); 

    tempPoly = new google.maps.Polyline({ 
    strokeColor: '#FF0000', 
    strokeOpacity: 1.0, 
    strokeWeight: 3, 
    map: map, 
    clickable: false 
    }); 

    // Add a listener for the click event 
    map.addListener('click', addLatLng); 

    map.addListener('mousemove', function(event) { 
    existingPolylinePath = poly.getPath(); 

    if (existingPolylinePath.length > 0) { 
     tempPoly.setPath([existingPolylinePath.getAt(existingPolylinePath.length - 1), event.latLng]); 
    } 
    }); 
} 

// Handles click events on a map, and adds a new point to the Polyline. 
function addLatLng(event) { 
    var path = poly.getPath(); 

    // Because path is an MVCArray, we can simply append a new coordinate 
    // and it will automatically appear. 
    path.push(event.latLng); 

    // Add a new marker at the new plotted point on the polyline. 
    var marker = new google.maps.Marker({ 
    position: event.latLng, 
    title: '#' + path.getLength(), 
    map: map 
    }); 
} 
    </script> 
    <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script> 
    </body> 
</html>

источник

2016-01-07 17:46:11 duncan

Отлично. Он отлично работал с событием map mousemove в моей пользовательской полилинии. Благодарю. – user2618844

Вы можете достичь этого, используя событие map mouseover. Это возвращает LatLng, скажем, pointA. Если вы можете написать код, который будет записывать предыдущую точку, которую вы нарисовали, например pointB, тогда вы можете визуализировать временную строку от pointA до pointB другого стиля в этом событии.

Сообщите мне, если вы хотите использовать образец кода.

источник

2016-01-07 17:15:11 KMB

Спасибо за ваше предложение. Я попробую сделать это с помощью mousemove. Если я не могу заставить его работать, я дам вам знать. – user2618844

Рисование ломаной линии похож на рисунок полилинии в DrawingManager

ответ

Смежные вопросы