Question

我想让用户点击地图

最后点击事件将用于设置 B点的X和Y坐标
A点预定义坐标为2.42249,3.82618。

编辑：

以前的行应该被清除 - 并且在地图上不可见。

找到下面的代码，我的代码的问题是click-event只触发一次。我想在每次点击后绘制线条。

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

Andy指出了问题，每次点击它都会重新创建地图。尝试将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);

每次点击事件后绘制线条 - Google地图点击事件仅触发一次

2 个答案: