Question

我有一张地图，其中有很多从JSON绘制的路线。这工作正常但我想在点击路线时为每条路线添加一些信息。我找到了一个已经有路线的小提琴演示，所以我只修改了它，但它说明了我的问题：

function initialize() {

    var myOptions = {
        zoom: 16,
        center: new google.maps.LatLng(10.012552, 76.327043),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    // Define an info window
    var infowindow = new google.maps.InfoWindow({
        content: ""
    });

    // ---------------------------------------------------------

    // Route 1 array
    var polylineCoordinates = [
        new google.maps.LatLng(10.013566, 76.331549),
        [CUT]
        new google.maps.LatLng(10.012552, 76.327043) 
    ];

    var txt = "This is the FIRST route";

    var polyline = new google.maps.Polyline({
        path: polylineCoordinates,
        strokeColor: '#FF3300',
        strokeOpacity: 2.0,
        strokeWeight: 5
    });

    polyline.setMap(map);

    // Add a "click" event for this route
    google.maps.event.addListener(polyline, "click", function (e) {
        infowindow.setPosition(e.latLng);
        infowindow.setContent(txt);
        infowindow.open(map);
    });

    // ---------------------------------------------------------

    // Route 2 array
    var polylineCoordinates = [
        new google.maps.LatLng(10.014566, 76.331549),
        [CUT]
        new google.maps.LatLng(10.015552, 76.327043)
    ];

    var txt = "This is the SECOND route";

    var polyline = new google.maps.Polyline({
        path: polylineCoordinates,
        strokeColor: '#FF3300',
        strokeOpacity: 2.0,
        strokeWeight: 5
    });

    polyline.setMap(map);

    // Add a "click" event for this route
    google.maps.event.addListener(polyline, "click", function (e) {
        infowindow.setPosition(e.latLng);
        infowindow.setContent(txt);
        infowindow.open(map);
    });

    // ---------------------------------------------------------

    // Click anywhere on the map to close the info window
    google.maps.event.addListener(map, "click", function () {
        infowindow.close();
    });

}

请注意我得到＆＃34;这是第二条路线＆＃34;对于这两条路线：

我用以下内容定义每个文本：

var txt = "This is the FIRST route";

// Add a "click" event for this route
    google.maps.event.addListener(polyline, "click", function (e) {
        infowindow.setPosition(e.latLng);
        infowindow.setContent(txt);
        infowindow.open(map);
    });

我有Fiddle demo。

如何为每条路线获取变量文字？

Answer 1

这是因为您在代码中意外重用变量txt。当你有

google.maps.event.addListener(polyline, "click", function (e) {
   infowindow.setPosition(e.latLng);
   infowindow.setContent(txt); //you accidently reuse the last txt here
   infowindow.open(map);
});

...它将始终是最后一个正在使用的txt：

var txt = "This is the SECOND route";

只需将txt作为属性分配给PolyLine对象：

var polyline = new google.maps.Polyline({
  txt : txt, 
  ...

并在点击处理程序中访问该属性：

google.maps.event.addListener(polyline, "click", function (e) {
  infowindow.setPosition(e.latLng);
  infowindow.setContent(this.txt); // <--- here
  infowindow.open(map);
});

见分叉小提琴 - ＆gt;的 http://jsfiddle.net/LkskL/

将变量InfoWindow附加到Google Maps v3中的折线路线

1 个答案: