Question

我使用以下脚本显示一个带有两个标记的地图。如果我将鼠标悬停在标记处，则会弹出一个带有该位置的弹出工具提示。我的问题是如何在默认情况下显示信息而不是鼠标悬停？

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

var map;

function init() {
    var mapOptions = {
        center: new google.maps.LatLng(37.1370345, 74.3872165),
        zoom: 3,
        zoomControl: true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.SMALL,
        },
        disableDoubleClickZoom: false,
        mapTypeControl: false,
        scaleControl: true,
        scrollwheel: false,
        streetViewControl: true,
        draggable: true,
        overviewMapControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles: [{
            "featureType": "administrative",
                "elementType": "labels.text.fill",
                "stylers": [{
                "color": "#444444"
            }]
        }, {
            "featureType": "landscape",
                "elementType": "all",
                "stylers": [{
                "color": "#111111"

            }, {
                "lightness": 50
            }]
        }, {
            "featureType": "poi",
                "elementType": "all",
                "stylers": [{
                "visibility": "off"
            }]
        }, {
            "featureType": "road",
                "elementType": "all",
                "stylers": [{
                "saturation": -100
            }, {
                "lightness": 45
            }]
        }, {
            "featureType": "road.highway",
                "elementType": "all",
                "stylers": [{
                "visibility": "on"
            }]
        }, {
            "featureType": "road.arterial",
                "elementType": "labels.icon",
                "stylers": [{
                "visibility": "off"
            }]
        }, {
            "featureType": "transit",
                "elementType": "all",
                "stylers": [{
                "visibility": "off"
            }]
        }, {
            "featureType": "water",
                "elementType": "all",
                "stylers": [{
                "color": "#ffffff"
            }, {
                "visibility": "on"
            }]
        }],

    }

    var mapElement = document.getElementById('map1');
    var map = new google.maps.Map(mapElement, mapOptions);

    var locations = [
        ['Country 1', 39.690642467918366, 39.07426848448813],
        ['Country 2', 39.682790, 19.764394]
    ];
    var infowindow = new google.maps.InfoWindow({
        content: "Loading..."
    });
    var myIcon = new google.maps.MarkerImage("http://i.imgur.com/jRfjvrz.png", null, null, null, new google.maps.Size(46, 46));
    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            content: locations[i][0],
            icon: myIcon,
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            animation: google.maps.Animation.DROP,
            optimized: false,
            map: map
        });

        google.maps.event.addListener(marker, 'mouseover', function () {
            infowindow.setContent(this.content);
            infowindow.open(map, this);
        });
    }
}

Answer 1

一种方法是将所有标记和信息窗口存储在数组或对象中。通过这种方式，您可以在需要时循环并打开/关闭它们（或基于某些条件的某些条件）。

可能是一个例子：

var myPopups = []; // create an array

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

myPopups.push(infowindow);// add your infowindow to your array

// once you've  added all your info windows to your array you 
// can loop through them to open all info windows.

for (var i = 0; i < myPopups.length; i++) {
    myPopups[i].open(map, marker);
}

请注意，open方法会将与infowindow相关联的标记作为第二个参数，因此您还需要存储标记。

Answer 2

为每个标记创建单独的infowindows，并将它们与该标记相关联。在创建它们时打开它们。

working fiddle

google.maps.event.addDomListener(window, 'load', init);

var map;

function init() {
  var mapOptions = {
    center: new google.maps.LatLng(37.1370345, 74.3872165),
    zoom: 3,
    zoomControl: true,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL,
    },
    disableDoubleClickZoom: false,
    mapTypeControl: false,
    scaleControl: true,
    scrollwheel: false,
    streetViewControl: true,
    draggable: true,
    overviewMapControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: [{
      "featureType": "administrative",
      "elementType": "labels.text.fill",
      "stylers": [{
        "color": "#444444"
      }]
    }, {
      "featureType": "landscape",
      "elementType": "all",
      "stylers": [{
        "color": "#111111"

      }, {
        "lightness": 50
      }]
    }, {
      "featureType": "poi",
      "elementType": "all",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "road",
      "elementType": "all",
      "stylers": [{
        "saturation": -100
      }, {
        "lightness": 45
      }]
    }, {
      "featureType": "road.highway",
      "elementType": "all",
      "stylers": [{
        "visibility": "on"
      }]
    }, {
      "featureType": "road.arterial",
      "elementType": "labels.icon",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "transit",
      "elementType": "all",
      "stylers": [{
        "visibility": "off"
      }]
    }, {
      "featureType": "water",
      "elementType": "all",
      "stylers": [{
        "color": "#ffffff"
      }, {
        "visibility": "on"
      }]
    }],

  }

  var mapElement = document.getElementById('map1');
  var map = new google.maps.Map(mapElement, mapOptions);

  var locations = [
    ['Country 1', 39.690642467918366, 39.07426848448813],
    ['Country 2', 39.682790, 19.764394]
  ];
  var infowindow = new google.maps.InfoWindow({
    content: "Loading..."
  });
  var myIcon = new google.maps.MarkerImage("http://i.imgur.com/jRfjvrz.png", null, null, null, new google.maps.Size(46, 46));
  var bounds = new google.maps.LatLngBounds();
  for (i = 0; i < locations.length; i++) {
    var marker = createMarker(locations[i], map, myIcon);
    bounds.extend(marker.getPosition());
  }
  map.fitBounds(bounds);
}

function createMarker(location, map, myIcon) {
  marker = new google.maps.Marker({
    content: location[0],
    icon: myIcon,
    position: new google.maps.LatLng(location[1], location[2]),
    animation: google.maps.Animation.DROP,
    optimized: false,
    map: map
  });
  var infowindow = new google.maps.InfoWindow({
    content: "Loading..."
  });
  google.maps.event.addListener(marker, 'mouseover', function() {
    infowindow.setContent(this.content);
    infowindow.open(map, this);
  });
  google.maps.event.trigger(marker, 'mouseover');
  return marker;
}

html,
body,
#map1 {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map1" style="border: 2px solid #3872ac;"></div>

如何在默认情况下显示地图工具提示而不是鼠标悬停？

2 个答案: