0

我想让用户点击地图

  • 最后点击事件将用于设置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);
4

2 回答 2

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);

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

于 2014-02-03T14:05:15.000 回答
0

这应该有效。只创建一次地图。只创建一次 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);
于 2014-02-03T14:15:57.623 回答