每次点击事件之后绘制线路 - Google Maps单击事件仅触发一次

Question

我想允许用户单击地图

• 上次点击事件将用于设置点B

的x和y坐标。

• 点A 具有预定义的坐标2.42249，3.82618。

编辑：

• 应清除以前的行 - 在地图上不可见。

找到代码波纹管，我代码的问题是点击事件只触发一次。每次点击后，我都想画线。

function initialize() 
{
    var mapOptions = 
    {
        zoom: 3,
        center: new google.maps.LatLng(2.42249, 3.82618),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
    google.maps.event.addListener(map, 'click', function(event)
    {
        drawLine(event.latLng);
    });
}
function drawLine(loc)
{
    mapOptions = 
    {
        zoom: 3,
        center: new google.maps.LatLng(2.42249, 3.82618),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);
    flightPlanCoordinates = [
        new google.maps.LatLng(2.42249, 3.82618),
        new google.maps.LatLng(loc.lat(), loc.lng())
    ];
    flightPath = new google.maps.Polyline({
        path: flightPlanCoordinates,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
    });
    flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

安迪指出问题，每次单击它时都会重新创建地图。尝试使您的map变量全局可用于两个函数，并摆脱两个功能之间的重复代码。类似：

var map, flightPath = new google.maps.Polyline();
function initialize() 
{
    var mapOptions = 
    {
        zoom: 3,
        center: new google.maps.LatLng(2.42249, 3.82618),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    google.maps.event.addListener(map, 'click', function(event)
    {
        drawLine(event.latLng);
    });
}
function drawLine(loc) {
    var flightPlanCoordinates = [
        new google.maps.LatLng(2.42249, 3.82618),
        loc
    ];
    flightPath.setMap(null);
    flightPath = new google.maps.Polyline({
        path: flightPlanCoordinates,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
    });
    flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);

（更新以演示每次单击时清除地图上的多线线）

Answer 2

这应该起作用。仅创建一次地图。仅创建一次poligon。然后继续添加行

var map;
var flightPath;
var firstLatLng = new google.maps.LatLng(2.42249, 3.82618);
function initialize()
{
    var mapOptions = 
    {
        zoom: 3,
        center: new google.maps.LatLng(2.42249, 3.82618),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
    google.maps.event.addListener(map, 'click', function(event)
    {
        drawLine(event.latLng);
    });
}
function createLine(loc){
    flightPath = new google.maps.Polyline({
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
    });
    flightPath.setMap(map);
}
function drawLine(loc)
{
    if (flightPath == null)
        createLine();
    flightPlanCoordinates = [
        firstLatLng,
        loc
    ];
    flightPath.setPath(flightPlanCoordinates);
}
google.maps.event.addDomListener(window, 'load', initialize);