javascript - 如何让 map 工具提示默认显示而不是在鼠标悬停时显示？

Question

我正在使用以下脚本来显示一张带有两个标记的 map 。如果我将鼠标悬停在标记上，则会出现一个带有位置的弹出工具提示。我的问题是如何让信息默认显示而不是在鼠标悬停时显示？

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

为每个标记创建单独的信息窗口并将它们与该标记相关联。创建它们时打开它们(通过调用 google.maps.event.trigger(marker, 'mouseover');)。

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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map1" style="border: 2px solid #3872ac;"></div>