google使用xml映射event.addListener

时间:2014-01-14 08:21:08

标签: javascript google-maps-api-3

我正在使用谷歌地图开发经销商。问题是,当我点击一个图标时,infowindow会打开错误的窗口。我使用xml导入。一切顺利,直到信息窗口。

请参阅网站https://www.turbho.com/dealerview.php

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD2maN7CjzWtwI6yuHj8lX078NzV0Ywkg0&sensor=false"></script>

{literal}
<script>
    var map;
    function initialize() {
      var mapOptions = {
        zoom: 12,
        mapTypeId: 'roadmap'

      };

      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        // Try HTML5 geolocation
          if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
              var pos = new google.maps.LatLng(position.coords.latitude,
                                               position.coords.longitude);

              var infowindow = new google.maps.InfoWindow({
                map: map,
                position: pos,
                panControl: true,
           zoomControl: true,
              scaleControl: true,
                content: 'U bent nu hier.'
              });

              map.setCenter(pos);
            }, function() {
              handleNoGeolocation(true);
            });
          } else {
            // Browser doesnt support Geolocation
            handleNoGeolocation(false);
          }

            var image = 'https://turbho.com/img/logoturbhogooglesmall.png';
            // Change this depending on the name of your PHP file
          downloadUrl("xml/datacomplete.xml", function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName("marker");

            for (var i = 0; i < markers.length; i++) {
              var name = markers[i].getAttribute("name");
              var address = markers[i].getAttribute("address");
              var zipcode = markers[i].getAttribute("zipcode");
              var town = markers[i].getAttribute("town");
              var anchor = markers[i].getAttribute("anchor");
              var website = markers[i].getAttribute("website"); 
              var point = new google.maps.LatLng(
                  parseFloat(markers[i].getAttribute("lat")),
                  parseFloat(markers[i].getAttribute("lng")));
              var html = "<span style='font-size:12px;'><b>" 
                               + name + "</b> <br />" 
                               + address + "<br />" 
                               + zipcode + " " + town + "<br /><br />"
                               + website + "<br /><br />" 
                               + anchor  + "</span>";  


              var marker = new google.maps.Marker({
                map: map,
                position: point,
                icon: image
              });

              var infowindow = new google.maps.InfoWindow({
                  content: html
              });

              google.maps.event.addListener(marker, 'click', function() {
                  infowindow.open(map,marker);

              }); 

            } 

          });

    }



        function downloadUrl(url, callback) {
          var request = window.ActiveXObject ?
              new ActiveXObject('Microsoft.XMLHTTP') :
              new XMLHttpRequest;

          request.onreadystatechange = function() {
            if (request.readyState == 4) {
              request.onreadystatechange = doNothing;
              callback(request, request.status);
            }
          };

          request.open('GET', url, true);
          request.send(null);
        }

        function doNothing() {}





    function handleNoGeolocation(errorFlag) {
      if (errorFlag) {
        var content = 'Error: The Geolocation service failed.';
      } else {
        var content = 'Error: Your browser doesn\'t support geolocation.';
      }

      var options = {
        map: map,
        position: new google.maps.LatLng(60, 105),
        content: content
      };

      var infowindow = new google.maps.InfoWindow(options);
      map.setCenter(options.position);
    }



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

</script>
{/literal}

<div id="map-canvas"></div>

1 个答案:

答案 0 :(得分:0)

问题解决了。我使用了一个函数,见下面,这对我有用。

function add_marker(latlng,title,box_html,image) 
            {
              //create the global instance of infoWindow 
              if(!window.infowindow)
              {
                window.infowindow=new google.maps.InfoWindow();
              } 

              var marker = new google.maps.Marker({
                  position: latlng,
                  map: map,
                  title: title,
                  icon: image
              });

              google.maps.event.addListener(marker, 'click', function() {
                infowindow.close();
                infowindow.setContent(box_html);
                infowindow.open(map,this)
              });   
              return marker;
            }

Thanx的帮助 路德