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

时间:2018-02-22 08:48:01

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

请帮帮我。 我无法获得信息 使用谷歌地图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中选择行的坐标。 线条正常显示,并且不显示点击率信息窗口

1 个答案:

答案 0 :(得分:0)

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

  1. 您永远不会调用createInfoWindow函数。
  2. setContent是一种方法,而不是InfoWindow
  3. 的属性
  4. event.LatLng应为event.latLng
  5. 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");
    

    screenshot of resulting map

    proof of concept fiddle

    代码段

    &#13;
    &#13;
    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>'
    &#13;
    html,
    body,
    #map_canvas {
      height: 100%;
      width: 100%;
      padding: 0px;
      margin: 0px;
    }
    &#13;
    <script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
    <div id='map_canvas'></div>
    &#13;
    &#13;
    &#13;