Question

如何在功能内部创建所有Google地图标记时，如何使用链接打开特定标记？

<a href="javascript:;" data-id="1" class='maplabels'>Open This Info Window</a>

我在这里尝试了解决方案但是在函数内部创建标记时它不起作用。 Google Maps, open info window after click on a link

这是我在函数中生成地图标记的Javascript：

var map = null;
var markers = [];

function addMarker(info, icon) {
  var location = {lat: info.lat, lng: info.lng};
  var marker = new google.maps.Marker({
    position: location,
    icon: 'map/images/pin-icon-' + icon + '.png',
    map: map
  });

  var content = '<h3>' +  info.name + '</h3>';
  content += info.address + '<br>';
  content += info.phone;

  clickaction = "click";

   //check if mobile
   if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
     clickaction = "click";
   } else { 
     clickaction = "mouseover";
   }

  google.maps.event.addListener(marker, clickaction, function() {
    if (infowindow) {
      infowindow.close();
    }

    infowindow = new google.maps.InfoWindow()
    infowindow.setContent(content);
    infowindow.open(map,marker);

  });

 markers.push(marker);

}


function addMarkerPerCategory(category) {
  deleteMarkers();

  if (category == 'ALL') {
    for (var i = 0; i < mapPinInfo.restaurants.length; i++) {
      addMarker(mapPinInfo.restaurants[i], 1);
    }
    for (var i = 0; i < mapPinInfo.transportation.length; i++) {
      addMarker(mapPinInfo.transportation[i], 1);
    }
    for (var i = 0; i < mapPinInfo.shopping.length; i++) {
      addMarker(mapPinInfo.shopping[i], 1);
    }
  } else if (category == 'RESTAURANTS') {
    for (var i = 0; i < mapPinInfo.restaurants.length; i++) {
      addMarker(mapPinInfo.restaurants[i], 1);
    }
  } else if (category == 'TRANSPORTATION') {
    for (var i = 0; i < mapPinInfo.transportation.length; i++) {
      addMarker(mapPinInfo.transportation[i], 1);
    }
  } else if (category == 'SHOPPING') {
    for (var i = 0; i < mapPinInfo.shopping.length; i++) {
      addMarker(mapPinInfo.shopping[i], 1);
    }
  } 
}

function initMap() {
  addMarkerPerCategory('ALL');
}

Answer 1

根据您现在的代码，您需要做三件事。

您需要一个全局信息窗口，就像地图和标记
将资产信息保存到标记，包括ID，名称等
你需要一个clickOpenInfowindow函数绑定到一个onclick事件，它传入id，可以在markers数组中找到目标标记，然后刷新信息窗

```

if

Answer 2

添加此功能使我能够捕获地图对象中的任何项目。

我希望它有所帮助：

<a href="javascript:;" class='maplabels' onClick="clickOpenInfowindow(1,'cat1');">Open Marker Info Window</a>

...

var infowindow = null;
var mapPinInfo = {
  cat1: [
    {name: 'Lorem Ipsum', address: 'Lorem Ipsum', lat: 55.5555, lng: -55.5555},
  ],
  cat2: [
    {name: 'Lorem Ipsum', address: 'Lorem Ipsum', lat: 55.5555, lng: -55.5555},
  ],
  cat3: [
    {name: 'Lorem Ipsum', address: 'Lorem Ipsum', lat: 55.5555, lng: -55.5555},
  ]
};

...

function clickOpenInfowindow (id,cat) {
  // find the marker by id and show category
  addMarkerPerCategory(cat); //function that opens the category filter
  var marker = markers[id];
  var category = cat.toLowerCase();
  var name = mapPinInfo[category][id].name;
  var address = mapPinInfo[category][id].address;
  if (marker) {
      var content = '<h3>' +  name + '</h3>';
      content += address + '<br>';

      infowindow = new google.maps.InfoWindow();
      infowindow.setContent(content);
      setTimeout(function(){ 
        infowindow.open(map, marker);
      }, 200);

  }
}

如何在标记功能中从链接打开谷歌地图上的特定信息窗口

2 个答案: