Question

我想知道是否可以在页面加载中打开下面代码中每个标记附加的一个infoWindow对象，而不是单击它们？就像现在一样，用户必须单击其中一个标记才能打开信息窗口。

我测试了创建一个“独立”信息窗口对象并且打开了精细的onload，但是当我点击其他一些标记时它没有关闭，因为onClick函数附加到只能关闭的标记附加到该对象的信息窗口。如果我错了，请纠正医学？

这是可能的，我可以通过数字或选项“呼叫”一个对象吗？提示是预先准备的！

或者如果有可能，我试图打开一个单独的信息窗口onload并且能够关闭它，如果我打开其他信息窗口之一！？

var map = null;
var infowindow = new google.maps.InfoWindow();
var iconBase = 'images/mapNumbers/number';
//var zoomLevel = 11;
//var mapPositionLat = 55.678939;
//var mapPositionLng =  12.568359;

function initialize() {

var markerPos = new google.maps.LatLng(55.674196574861895, 12.583808898925781);

var myOptions = {
zoom: 11,
//center: new google.maps.LatLng(55.678939, 12.568359),
center: markerPos,
mapTypeId: google.maps.MapTypeId.ROADMAP
 }

 map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

 google.maps.event.addListener(map, 'click', function () {
 infowindow.close();
 });

 google.maps.event.addListener(map, 'zoom_changed', function () {
 infowindow.close();
 });

 google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(markerPos);
map.setZoom(zoomLevel);
//var center = map.getCenter();
 });

// Add markers to the map
var point;
point = new google.maps.LatLng(55.667093,12.581255); createMarker(point, "<div class='infoWindow'>1</div>");
point = new google.maps.LatLng(55.660794,12.58972); createMarker(point, "<div class='infoWindow'>2</div>");
point = new google.maps.LatLng(55.660491,12.587087); createMarker(point, "<div class='infoWindow'>3</div>");
  }

 // Create markers
  function createMarker(latlng, html, name, number) {
var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title: name,
    icon: iconBase + number + '.png'
});

google.maps.event.addListener(marker, 'click', function () {
    infowindow.setContent(html);
    infowindow.open(map, marker);
    //map.setCenter(marker.getPosition());
    map.setCenter(55.678939, 12.568359); 
});
}

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

Answer 1

要在地图加载时显示InfoWindow，请拨打

infowindow.open(map, marker);

在标记侦听器之外。

下面演示了createMarker函数，其中参数displayInfoWindow定义了在地图加载时是否显示InfoWindow：

// Create marker
function createMarker(map,markerPos, markerTitle,infoWindowContent,displayInfoWindow) {
  var marker = new google.maps.Marker({
      position: markerPos,
      map: map,
      title: markerTitle,
  });

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

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

示例：http://jsbin.com/lusuquwu/1/

Answer 2

有可能。一种可能的解决方案是将标记保存到数组，然后使用click在其中一个上触发google.maps.event.trigger()事件。例如：

...
var zoomLevel = 11; // uncommented due to error message
var markers = [];

function initialize() {
...

    point = new google.maps.LatLng(55.660491,12.587087); createMarker(point, "<div class='infoWindow'>3</div>");

    google.maps.event.trigger(markers[1], 'click');
}

function createMarker(latlng, html, name, number) {
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: name,
        //icon: iconBase + number + '.png'
        icon: iconBase
    });

    // added to collect markers
    markers.push(marker);

    google.maps.event.addListener(marker, 'click', function () {
        console.log('click event listener');
        infowindow.setContent(html);
        infowindow.open(map, marker);
        //map.setCenter(marker.getPosition());

        // corrected due to error
        map.setCenter(new google.maps.LatLng(55.678939, 12.568359)); 
    });
}

Answer 3

我将来自此网站和其他网站的信息结合起来提出以下解决方案，因为大多数解决方案都适用于多标记地图。

只需几行即可。

// Start with your map
var map = new google.maps.Map(...);

// Now define the info window using HTML. You can insert images etc.
var info = new google.maps.InfoWindow({content: 'YOUR HTML HERE'});

// Now define the marker position on the map
var marker = new google.maps.Marker({map: map, position:{lat: 'YOUR LATITUDE',lng: 'YOUR LONGITUDE'}});

现在我们有变量，只需隐藏标记，显示信息窗口并设置地图缩放和中心。

// Set the map zoom
map.setZoom('YOUR ZOOM LEVEL [1 - 20]');

// Set the map center
map.setCenter({lat: 'YOUR LATITUDE',lng: 'YOUR LONGITUDE'});

// Hide the marker that we created        
marker.setVisible(false);

// Open the info window with the HTML on the marker position
info.open(map, marker);

对于内容，您可以根据需要创建图层并插入图像和文本。只需确保在html中包含图像的完整URL。

我还建议将其添加到CSS中以隐藏关闭按钮，这有效地使其成为永久的信息窗口。

.gm-style-iw + div {display: none;}

加载谷歌地图打开信息窗口

3 个答案: