多条谷歌地图折线和信息窗口答案

【问题标题】：Multiple Google Maps polylines and infowindows多条谷歌地图折线和信息窗口
【发布时间】：2013-10-04 16:33:35
【问题描述】：

当尝试将多个信息窗口添加到多段线时，信息窗口不显示。

已经用同样的问题尝试过这个线程： Multiple polylines and infowindows with Google Maps V3

如您所见，我尝试在给定答案中使用建议的功能，但仍然无法正常工作。

这是我的代码：

var center = new google.maps.LatLng(51.97559, 4.12565);

    var map = new google.maps.Map(document.getElementById('map'), {
        center: center,
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });


var bounds = new google.maps.LatLngBounds();

// start coordinates
var start = ['51.97559, 4.12565', 
             '55.46242, 8.43872', 
             '49.49259, 0.1065',
             '50.36862, -4.13412']

// end coordinates
var end = ['51.94784, 1.2539', 
           '51.94784, 1.2539', 
           '50.79726, -1.11048',
           '43.45846, -3.80685']

function initialize() {


    // Make clickable tooltip
   /*

    */ 

    for (var i=0; i < end.length; i++){
      calcRoute(start[i], end [i]);
    }


}

function calcRoute(source,destination){

      var poly = new google.maps.Polyline({
        path: [],
        strokeColor: '#FF0000',
        strokeWeight: 5,
        strokeOpacity: 0.5
    });


   var directionsService = new google.maps.DirectionsService(); 
    var request = { 
        origin:source, 
        destination: destination, 
        travelMode: google.maps.DirectionsTravelMode.WALKING 
    };

    directionsService.route(request, function(result, status) { 
        if (status == google.maps.DirectionsStatus.OK) {
            path = result.routes[0].overview_path;

            $(path).each(function(index, item) {
                poly.getPath().push(item);
                bounds.extend(item);
            })

                // Custom infoWindow
    var toolTip = '<div id="map-box">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h1 id="firstHeading" class="firstHeading">Route</h1>'+
        '<div id="bodyContent">'+
        '<p>Lorem ipsum dolor sit amet</p>'+
        '</div>'+
        '</div>';


       poly.setMap(map);
       createInfoWindow(poly,toolTip); 


            map.fitBounds(bounds);
        }
    });  


}


function createInfoWindow(poly,content) {

    google.maps.event.addListener(poly, 'click', function(event) {
        infowindow.content = content;
        //infowindow.position = event.latLng;
        infowindow.setPosition(event.latLng);
        infowindow.open(map);
    });
}

google.maps.event.addDomListener(window, 'load', initialize);

这里是 jsfiddle 链接： http://jsfiddle.net/cnwMG/7/

非常感谢在折线上显示信息窗口的任何帮助。

【问题讨论】：

标签： javascript google-maps google-maps-api-3 infowindow google-polyline

【解决方案1】：

你缺少最基本的：实例化信息窗口:)

那么，设置infowindow属性的正确方法是这样的

infowindow.setContent(toolTip);
infowindow.setPosition(event.latLng);

不是

infowindow.content = toolTip;

您在调用信息窗口的逻辑上也遇到了一些问题。
这是一个清理过的分叉小提琴http://jsfiddle.net/b7FHV/

【讨论】：

这太棒了，非常有意义，非常感谢！标记为已解决:)