Question

这是我的带有java脚本的html代码。当我调试这段代码时，有一些错误，但我不知道它为什么会发生。当我点击我创建的标记时，我想创建一个事件（如infowindow）。

我的错误讯息是

未捕获的TypeError：无法读取null
的属性'addEventListener'

var poly;
var geocoder;
var centerChangedLast;
var reverseGeocodedLast;
var currentReverseGeocodeResponse;
var infoWindow;
var map;
var marker;
var markers = [];


    function initialize() { 
     var mapOptions = {
       zoom: 8,
       center: new google.maps.LatLng(37.5675451, 126.9773356)
     };
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
      geocoder = new google.maps.Geocoder();



      var polyOptions = {
                strokeColor: '#000000',
                strokeOpacity: 1.0,
                strokeWeight: 3
              };
      poly = new google.maps.Polyline(polyOptions);
      poly.setMap(map);


       google.maps.event.addListener(map, 'click', function(event) 
               { addMarker(event.latLng);});

    } 


    function addMarker(location) {

         marker = new google.maps.Marker({
             draggable:true,
            animation : google.maps.Animation.DROP,
            position : location, 
            map : map

        });

        markers.push(marker); 
        var path  = poly.getPath();
          path.push(marker.position);

          setupEvents();
          centerChanged();

    }

    function setAllMap(map) { 
        for (var i = 0; i < markers.length; i++) {
            markers[i].setMap(map);
        }
    }

    function clearMarkers() { 
        setAllMap(null);
    }

    function showMarkers() { 
        setAllMap(map);
    }

    function deleteMarkers() { 
        clearMarkers();
        markers = [];
    }
    function minusMarkers() {
        markers[markers.length-1].setMap(null);
        markers.length=markers.length-1;

    }

    function clearPoly() { 
        poly.setMap(null);
    }

    function showPoly() { 
        poly.setMap(map);
    }

    function deletePoly() {
        clearPoly();
        poly = null;
        var polyOptions = {
                strokeColor: '#000000',
                strokeOpacity: 1.0,
                strokeWeight: 3
              };
        poly = new google.maps.Polyline(polyOptions);
        poly.setMap(map);
    }

    function setupEvents() {
        reverseGeocodedLast = new Date();
        centerChangedLast = new Date();

        setInterval(function() {
          if((new Date()).getSeconds() - centerChangedLast.getSeconds() > 1) {
            if(reverseGeocodedLast.getTime() < centerChangedLast.getTime())
              reverseGeocode();
          }
        }, 1000);
        google.maps.event.addListener(map, 'zoom_changed', function() {
          document.getElementById("zoom_level").innerHTML = map.getZoom();
        });
        google.maps.event.addListener(map, 'center_changed', centerChanged)     

        google.maps.event.addDomListener(document.getElementById('crosshair'),'dblclick', function() {
           map.setZoom(map.getZoom() + 1);
        });
      }
      function getCenterLatLngText() {
        return '(' + map.getCenter().lat() +', '+ map.getCenter().lng() +')';
      }
      function centerChanged() {
        centerChangedLast = new Date();
        var latlng = getCenterLatLngText();
        document.getElementById('latlng').innerHTML = latlng;
        document.getElementById('formatedAddress').innerHTML = '';
        currentReverseGeocodeResponse = null;
      }
      function reverseGeocode() {
        reverseGeocodedLast = new Date();
        geocoder.geocode({latLng:map.getCenter()},reverseGeocodeResult);
      }
      function reverseGeocodeResult(results, status) {
        currentReverseGeocodeResponse = results;
        if(status == 'OK') {
          if(results.length == 0) {
            document.getElementById('formatedAddress').innerHTML = 'None';
          } else {
            document.getElementById('formatedAddress').innerHTML = results[0].formatted_address;
          }
        } else {
          document.getElementById('formatedAddress').innerHTML = 'Error';
        }
      }
      function geocode() {
        var address = document.getElementById("address").value;
        geocoder.geocode({
          'address': address,
          'partialmatch': true}, geocodeResult);
      }
      function geocodeResult(results, status) {
        if (status == 'OK' && results.length > 0) {
          map.fitBounds(results[0].geometry.viewport);
        } else {
          alert("Geocode was not successful for the following reason: " + status);
        }
      }
google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

首先在javascript中声明infoWindow对象，例如var infowindow = new google.maps.InfoWindow();看看是否有效

google.maps.event.addListener（标记，'点击'， function（）{ infowindow.setContent（“你的内容”）; infowindow.open（map，this）; }）;

当我点击谷歌地图上的标记时，如何创建信息窗口

1 个答案: