Question

代码完美无缺。我看到的问题是地图标记首次加载时不会自动打开。

这是我的代码。我的前几次尝试是使用“infoWindow.open（map，marker）;”在For声明和for声明的结论中。

我还有一个包含当前代码的codepen。 https://codepen.io/designsbycamaron/pen/evPWbL

jQuery(function($) {
    // Asynchronously Load the map API 
    var script = document.createElement('script');
    script.src = "//maps.googleapis.com/maps/api/js?key=AIzaSyCHlDHe3KZYAMqQIQoklenAKqi6jE2lxPA&callback=initMap";
    document.body.appendChild(script);
});
function initMap() {
        var mapOptions = {
            center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
            zoom: 10,
             mapTypeControl: false,
      draggable: false,
      scaleControl: false,
      scrollwheel: false,
      navigationControl: false,
      streetViewControl: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("main_map"), mapOptions);

        //Create and open InfoWindow.
        var infoWindow = new google.maps.InfoWindow();

        for (var i = 0; i < markers.length; i++) {
            var data = markers[i];
            var myLatlng = new google.maps.LatLng(data.lat, data.lng);
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: data.title
            });

            //Attach click event to the marker.
            (function (marker, data) {
                google.maps.event.addListener(marker, "click", function (e) {
                    //Wrap the content inside an HTML DIV in order to set height and width of InfoWindow.
                    infoWindow.setContent("<div style = 'width:200px;min-height:40px'>" + data.description + "</div>");

                });

            })(marker, data);

        }
        infoWindow.open(map,marker);
    }

Answer 1

每个标记都需要一个infoWindow。将它们存储在一个数组中。一开始就打开它们。还有一个事件监听器在单击时打开正确的监听器并关闭另一个。不确定你想在制造商点击上做什么...

Link to forked codepen here

var markers = [{"title": "City A","lat": "44.6299425","lng": "-123.0813560","description": "lore lipsum epsum ipsum", "deptID":"29","provID":"119"},{"title": "City B","lat": "44.5671365","lng": "-123.2745664","description": "lore lipsum epsum ipsum", "deptID":"28","provID":"120"}];
jQuery(function($) {
  // Asynchronously Load the map API 
  var script = document.createElement('script');
  script.src = "//maps.googleapis.com/maps/api/js?key=AIzaSyCHlDHe3KZYAMqQIQoklenAKqi6jE2lxPA&callback=initMap";
  document.body.appendChild(script);
});

var markersList = [];

function initMap() {

  var mapOptions = {
    center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
    zoom: 10,
    mapTypeControl: false,
    draggable: false,
    scaleControl: false,
    scrollwheel: false,
    navigationControl: false,
    streetViewControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("main_map"), mapOptions);

  for (var i = 0; i < markers.length; i++) {

    var data = markers[i];

    var myLatlng = new google.maps.LatLng(data.lat, data.lng);

    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: data.title
    });

    var infowindow = new google.maps.InfoWindow({
      content: "<div style = 'width:200px;min-height:40px'>" + markers[i].description + "</div>"
    });

    marker.infobox = infowindow;

    markersList.push(marker);

    //Attach click event to the marker.
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {

        console.log(i);

        // Close all other infoboxes
        for (var j = 0; j < markersList.length; j++) {
          markersList[j].infobox.close(map);
        }

        // Open correct info box
        markersList[i].infobox.open(map, markersList[i]);
      }
    })(marker, i));
  }

  // Open all on page load
  for (var j = 0; j < markersList.length; j++) {
    markersList[j].infobox.open(map, markersList[j]);
  }
}

谷歌地图API自动打开infoWindow

1 个答案: