我无法显示折线的信息窗口答案

【问题标题】：I can not display the info window for a polyline我无法显示折线的信息窗口
【发布时间】：2018-08-02 01:03:45
【问题描述】：

请帮帮我。我无法获取信息窗口使用谷歌地图 api v3。我的错在哪里？

var infowindow = new google.maps.InfoWindow({
        content: "test line"
});
           downloadUrl('phpsqlinfo_addrow_lin.php', function(data) {
           var xml = data.responseXML;

           var lines = xml.documentElement.getElementsByTagName('line');

           for (var a = 0; a < lines.length; a++) {


            var colour = lines[a].getAttribute("colour");
            var name = lines[a].getAttribute("name");
            var width  = parseFloat(lines[a].getAttribute("width"));

           var points = lines[a].getElementsByTagName('point');
           var pts = [];
           for (var i = 0; i < points.length; i++) {
           pts[i] = new google.maps.LatLng(
              parseFloat(points[i].getAttribute('lat')),
              parseFloat(points[i].getAttribute('lng')));

         }

       var polyline = new google.maps.Polyline({
                          path:pts,
                          strokeColor:colour,
                          strokeOpacity:0.5,
                          strokeWeight:width,
                          clickable: true
                          });

       polyline.setMap(map);


       function createInfoWindow(polyline,content) {
        google.maps.event.addListener(polyline, "click", function (event) {
        infowindow.setPosition(event.LatLng);
        infowindow.setContent = content;
        infowindow.open(map);
    });
}
}  
});

线的坐标是从基础mysql中选择的。线条正常显示，点击信息窗口不显示

【问题讨论】：

标签： mysql google-maps google-maps-api-3

【解决方案1】：

您的代码中有几个拼写错误：

您永远不会调用 createInfoWindow 函数。
setContent 是一种方法，而不是 InfoWindow 的属性
event.LatLng 应该是 event.latLng

function createInfoWindow(polyline, content) {
  google.maps.event.addListener(polyline, "click", function(event) {
    infowindow.setPosition(event.latLng);
    infowindow.setContent (content);
    infowindow.open(map);
  });
}
createInfoWindow(polyline, "my polyline");

proof of concept fiddle

代码 sn-p：

function initialize() {
  var map;
  var bounds = new google.maps.LatLngBounds();
  var infowindow = new google.maps.InfoWindow();
  var mapOptions = {
    center: {
      lat: 45,
      lng: -100
    },
    zoom: 2,
    mapTypeId: 'roadmap'
  };
  // Display a map on the page
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  var xml = xmlParse(xmlStr);
  var lines = xml.documentElement.getElementsByTagName('line');

  for (var a = 0; a < lines.length; a++) {
    var colour = lines[a].getAttribute("colour");
    var name = lines[a].getAttribute("name");
    var width = parseFloat(lines[a].getAttribute("width"));

    var points = lines[a].getElementsByTagName('point');
    var pts = [];
    for (var i = 0; i < points.length; i++) {
      pts[i] = new google.maps.LatLng(
        parseFloat(points[i].getAttribute('lat')),
        parseFloat(points[i].getAttribute('lng')));
    }

    var polyline = new google.maps.Polyline({
      path: pts,
      strokeColor: colour,
      strokeOpacity: 0.5,
      strokeWeight: width,
      clickable: true
    });

    polyline.setMap(map);

    function createInfoWindow(polyline, content) {
      google.maps.event.addListener(polyline, "click", function(event) {
        infowindow.setPosition(event.latLng);
        infowindow.setContent(content);
        infowindow.open(map);
      });
    }
    createInfoWindow(polyline, "my polyline");
    google.maps.event.trigger(polyline,"click");
  }
}
google.maps.event.addDomListener(window, 'load', initialize);

function xmlParse(str) {
  if ((typeof ActiveXObject != 'undefined') || ("ActiveXObject" in window)) {
    var doc = new ActiveXObject('Microsoft.XMLDOM');
    doc.loadXML(str);
    return doc;
  }

  if (typeof DOMParser != 'undefined') {
    return (new DOMParser()).parseFromString(str, 'text/xml');
  }

  return document.createElement('div', null);
}

var xmlStr = '<markers><line label="JBU190 rte" html="JBU190 : 03-Oct-2017 : KSAN - KJFK" colour="#00FF00" width="2"><!-- KSAN ZZOOO1 MTBAL AVRRY CADEZ HAKMN Q73 LAKRR BAWER LARVE EKR BFF FOD KG75M DAFLU J70 LVZ LENDY6 KJFK Name	Latitude	Longitude	Outbound Course	Distance this Leg	Distance Remaining	Distance Flown	Type --><point label="KSAN" lat="32.7335556" lng="-117.1896667" Course="286" DistanceThisLeg="n/a" DistanceRemaining="2443" DistanceFlown="0" Type="KSAN Origin Airport" /><point label="JETTI" lat="32.7546111" lng="-117.2765278" Course="168" DistanceThisLeg="5" DistanceRemaining="2447" DistanceFlown="5" Type="JETTI Waypoint" /><point label="ZZOOO" lat="32.6314444" lng="-117.2458333" Course="96" DistanceThisLeg="9" DistanceRemaining="2449" DistanceFlown="8" Type="ZZOOO Waypoint" /><point label="JORRJ" lat="32.6018333" lng="-116.9161389" Course="77" DistanceThisLeg="19" DistanceRemaining="2433" DistanceFlown="18" Type="JORRJ Waypoint" /><point label="GRIDR" lat="32.6302222" lng="-116.7731944" Course="22" DistanceThisLeg="9" DistanceRemaining="2425" DistanceFlown="25" Type="GRIDR Waypoint" /><point label="PIEZZ" lat="33.0094167" lng="-116.5874444" Course="24" DistanceThisLeg="28" DistanceRemaining="2404" DistanceFlown="40" Type="PIEZZ Waypoint" /><point label="NSHEE" lat="33.3993611" lng="-116.3831111" Course="54" DistanceThisLeg="29" DistanceRemaining="2381" DistanceFlown="66" Type="NSHEE Waypoint" /><point label="MTBAL" lat="33.6033056" lng="-116.0423056" Course="69" DistanceThisLeg="24" DistanceRemaining="2358" DistanceFlown="90" Type="MTBAL Waypoint" /><point label="AVRRY" lat="33.7520417" lng="-115.5707111" Course="23" DistanceThisLeg="29" DistanceRemaining="2329" DistanceFlown="117" Type="AVRRY Waypoint (RNAV)" /><point label="CADEZ" lat="34.2065639" lng="-115.3428722" Course="9" DistanceThisLeg="34" DistanceRemaining="2304" DistanceFlown="147" Type="CADEZ Reporting Point" /><point label="HAKMN" lat="35.5078639" lng="-115.0797333" Course="48" DistanceThisLeg="91" DistanceRemaining="2256" DistanceFlown="227" Type="HAKMN RNAV" /><point label="ZZYZX" lat="35.6648667" lng="-114.8652750" Course="48" DistanceThisLeg="16" DistanceRemaining="2240" DistanceFlown="242" Type="ZZYZX RNAV" />\<point label="LAKRR" lat="36.0854778" lng="-114.2858778" Course="45" DistanceThisLeg="44" DistanceRemaining="2200" DistanceFlown="285" Type="LAKRR RNAV" /><point label="BAWER" lat="37.6351889" lng="-112.2794139" Course="52" DistanceThisLeg="154" DistanceRemaining="2059" DistanceFlown="438" Type="BAWER Waypoint (RNAV)" /><point label="LARVE" lat="39.0479694" lng="-109.9432306" Course="56" DistanceThisLeg="160" DistanceRemaining="1910" DistanceFlown="596" Type="LARVE Waypoint (RNAV)" /><point label="EKR" lat="40.0675000" lng="-107.9250000" Course="60" DistanceThisLeg="129" DistanceRemaining="1789" DistanceFlown="723" Type="EKR VOR-DME (NAVAID)" /><point label="BFF" lat="41.8941667" lng="-103.4819444" Course="81" DistanceThisLeg="264" DistanceRemaining="1539" DistanceFlown="983" Type="BFF VOR-TAC (NAVAID)" /><point label="FOD" lat="42.6111111" lng="-94.2947222" Course="89" DistanceThisLeg="473" DistanceRemaining="1067" DistanceFlown="1421" Type="FOD VOR-TAC (NAVAID)" /><point label="KG75M" lat="42.5000000" lng="-88.0000000" Course="90" DistanceThisLeg="321" DistanceRemaining="746" DistanceFlown="1725" Type="KG75M NRS-WAYPOINT" /><point label="DAFLU" lat="42.3790833" lng="-82.6887778" Course="93" DistanceThisLeg="271" DistanceRemaining="477" DistanceFlown="1990" Type="DAFLU Reporting Point" /><point label="BROKK" lat="42.3313889" lng="-81.5819389" Course="94" DistanceThisLeg="57" DistanceRemaining="421" DistanceFlown="2045" Type="BROKK Reporting Point" /><point label="BEWEL" lat="42.2898583" lng="-80.7619278" Course="94" DistanceThisLeg="42" DistanceRemaining="379" DistanceFlown="2087" Type="BEWEL Reporting Point" /><point label="JHW" lat="42.1886075" lng="-79.1213050" Course="109" DistanceThisLeg="84" DistanceRemaining="297" DistanceFlown="2170" Type="JHW VOR-DME (NAVAID)" /><point label="HOXIE" lat="41.8650111" lng="-77.8526056" Course="109" DistanceThisLeg="69" DistanceRemaining="228" DistanceFlown="2233" Type="HOXIE Reporting Point" /><point label="DMACK" lat="41.7857583" lng="-77.5519222" Course="110" DistanceThisLeg="16" DistanceRemaining="212" DistanceFlown="2248" Type="DMACK Reporting Point" />\<point label="STENT" lat="41.6790472" lng="-77.1527556" Course="110" DistanceThisLeg="22" DistanceRemaining="190" DistanceFlown="2269" Type="STENT Reporting Point" /><point label="MAGIO" lat="41.5273833" lng="-76.5964944" Course="110" DistanceThisLeg="31" DistanceRemaining="159" DistanceFlown="2297" Type="MAGIO Reporting Point" /><point label="LVZ" lat="41.2728025" lng="-75.6894678" Course="313" DistanceThisLeg="50" DistanceRemaining="109" DistanceFlown="2343" Type="LVZ VOR-TAC (NAVAID)" /><point label="LVZ" lat="41.2728056" lng="-75.6894722" Course="114" DistanceThisLeg="0" DistanceRemaining="109" DistanceFlown="2343" Type="LVZ VOR-TAC (NAVAID)" /><point label="JENNO" lat="41.1529167" lng="-75.3314167" Course="114" DistanceThisLeg="20" DistanceRemaining="89" DistanceFlown="2362" Type="JENNO Reporting Point" /><point label="HARTY" lat="41.0711944" lng="-75.0898889" Course="114" DistanceThisLeg="14" DistanceRemaining="75" DistanceFlown="2375" Type="HARTY Reporting Point" /><point label="MUGZY" lat="41.0301389" lng="-74.9693611" Course="114" DistanceThisLeg="7" DistanceRemaining="68" DistanceFlown="2381" Type="MUGZY Reporting Point" /><point label="STW" lat="40.9958333" lng="-74.8690278" Course="98" DistanceThisLeg="6" DistanceRemaining="62" DistanceFlown="2386" Type="STW VOR-DME (NAVAID)" /><point label="LENDY" lat="40.9148333" lng="-74.1352500" Course="123" DistanceThisLeg="39" DistanceRemaining="27" DistanceFlown="2424" Type="LENDY Reporting Point" /><point label="LGA" lat="40.7837222" lng="-73.8686111" Course="155" DistanceThisLeg="17" DistanceRemaining="11" DistanceFlown="2438" Type="LGA VOR-DME (NAVAID)" /><point label="KJFK" lat="40.6399257" lng="-73.7786950" Course="n/" DistanceThisLeg="11" DistanceRemaining="0" DistanceFlown="2443" Type="KJFK Destination Airport" />  </line></markers>'

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id='map_canvas'></div>

【讨论】：