Google maps api 3 单击Google Maps API v3从标记绘制多段线

这是我几天前所做的一次尝试的后续行动，我试图在一个新的方向上迎接我的挑战。我的目标是，当我单击一个标记时，我希望多段线的原点lat/lng与该标记的lat/lng相同。我遇到的技巧是，在单击存在的标记的for循环中，将创建的线放在何处，以便该线将使用标记的坐标，即声明的韵文。由于我在该函数之外声明了lat/lng变量，因此该行默认为它们的值：

var oLat=10.1 var oLng=22.1

，而不是for循环内的值。这是我的当前for循环：

for (var i in points) {
var p = points[i];
var latlng = new google.maps.LatLng(p[1], p[2]);

var marker = new google.maps.Marker({
    position: latlng,
    icon: points[i][3],
    zIndex: p[5],
    title: p[0]     
});

overviewMarkers.push(marker);


google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
    infowindow.setContent(points[i][6] + '<div id="infopanel">'+
  '<input onclick="addLine();" type=button value="Show Routes">'+
  '<input onclick="removeLine();" type=button value="Remove Routes"></div>');
      infowindow.open(map, marker)
     oLat = parseFloat(this.position.lat().toFixed(4))
     oLng = parseFloat(this.position.lng().toFixed(4))
        }      
    })(marker, i) );        
}//end for loop  

我试图看看谷歌提供的功能，但它似乎比我试图做的要简单一些

您需要在标记单击侦听器中创建多段线（在该侦听器中可以访问标记并获取其位置）

使用记录的方法（.getPosition（），而不是未记录的属性.position）

修复您的javascript错误感谢非常详细的响应和清理的代码，这更有意义。我不明白的一点是，如果我希望通过函数显示多段线，而不是在创建直线时将“贴图”属性设置为“贴图”，那么该函数将放置在何处？其思想是

函数设置行（map）

将从另外两个函数启动，设置行（map）或设置行（Null）。这样就可以通过html显示/隐藏行。再次感谢你的帮助，对这一点还是很陌生的。更新如果您想让它工作，请修复javascript错误（

uncaughtreferenceerror:setLines未定义

）完美，因此将setLines函数移到initialize函数之外可以调用它。最后一个问题，您是如何测试代码以获得上述错误的，这将非常有助于我将来自己解决问题！要从HTML单击侦听器调用函数，它们要么需要在全局范围内，要么需要从它们在范围内的某个位置使用google.maps.event.addDomainListener。对于错误消息，请查看浏览器javascript控制台，我通常使用Chrome，除非它是特定于浏览器的问题。美丽的。再次感谢。

var arrayLine=[]
var originPoint = [new google.maps.LatLng(oLat,oLng)];
var destPoint = [new google.maps.LatLng(51.9279723,4.4904063),
                 new google.maps.LatLng(40.136482, -73.831299),
                 new google.maps.LatLng(34.0204989,-118.4117325)                 
                ];
var lineSymbol = {
    path: google.maps.SymbolPath.FORWARD_OPEN_ARROW                  
};

for (var d in destPoint) {
    var t = destPoint[d];

  var linePath = new google.maps.Polyline({
    path: [originPoint[0],[t][0]], 
    strokeColor: '#4A484D',
    strokeOpacity: 1.0,
    strokeWeight: 2,
    geodesic: true,
      icons: [{
    icon: lineSymbol,
    offset: '100%',
    repeat: '60px'
  }]

  });
   arrayLine.push(linePath)

function setLines(map) {
for (var i = 0; i < arrayLine.length; i++) {
    arrayLine[i].setMap(map);
    }
   }
  }
function addLine() {
setLines(map);
alert(parseFloat(oLat));
}   

for (var i in points) {
    var p = points[i];
    var latlng = new google.maps.LatLng(p[1], p[2]);

    var marker = new google.maps.Marker({
        position: latlng,
        icon: points[i][3],
        zIndex: p[5],
        map: map,
        title: p[0]
    });

    overviewMarkers.push(marker);


    google.maps.event.addListener(marker, 'click', (function (marker, i) {
        return function () {
            var originPoint = this.getPosition();
            var oLat = parseFloat(this.getPosition().lat().toFixed(4));
            var oLng = parseFloat(this.getPosition().lng().toFixed(4));
            for (var d in destPoint) {
                var t = destPoint[d];

                var linePath = new google.maps.Polyline({
                    path: [originPoint, [t][0]],
                    strokeColor: '#4A484D',
                    strokeOpacity: 1.0,
                    strokeWeight: 2,
                    geodesic: true,
                    icons: [{
                        icon: lineSymbol,
                        offset: '100%',
                        repeat: '60px'
                    }],
                    map: map

                });
                arrayLine.push(linePath);
            }
            infowindow.setContent(points[i][6] + '<div id="infopanel">' +
                '<input onclick="addLine();" type=button value="Show Routes">' +
                '<input onclick="removeLine();" type=button value="Remove Routes"></div>');
            infowindow.open(map, marker);
        };
    })(marker, i));
} //end for loop