javascript - 创建指向谷歌地图上特定标记的链接

标签 javascript jquery google-maps dom

我使用以下示例实现了谷歌地图商店定位器:https://developers.google.com/maps/articles/phpsqlsearch_v3

它工作正常,但我试图让列表显示在实际的 ul 中,而不是在下拉列表中。我已将结果更改为显示为 li,但我无法使链接正常工作。

它当前链接到下拉列表中选定的选项,但我想让每个 li 成为一个链接。这是我需要改变的一点:

function load() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(53.438065, -1.823730),
    zoom: 4,
    mapTypeId: 'roadmap',
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
  });
  infoWindow = new google.maps.InfoWindow();

  locationSelect = document.getElementById("locationSelect");
  locationSelect.onchange = function() {
    var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
    if (markerNum != "none"){
      google.maps.event.trigger(markers[markerNum], 'click');
    }
  };
}

function searchLocations() {
 var address = document.getElementById("addressInput").value;
 var geocoder = new google.maps.Geocoder();
 geocoder.geocode({address: address}, function(results, status) {
   if (status == google.maps.GeocoderStatus.OK) {
    searchLocationsNear(results[0].geometry.location);
   } else {
     alert(address + ' not found');
   }
 });
}

最佳答案

因此,您可以在所有 li 项目上添加点击事件,并在该点击事件中传递标记编号,如下所示:

function selectMarker(markerNum) {
    google.maps.event.trigger(markers[markerNum], 'click');
};

此 selectMarker 函数必须应用于所有 li 才能使其正常工作。

关于javascript - 创建指向谷歌地图上特定标记的链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23220646/

相关文章:

javascript - 让多个 Angular 模态处理 http 响应数据

javascript - HTML Canvas 不会画线

javascript - 如何阻止文本中的脚本标签执行?

javascript - 当浏览器具有一定宽度时,jQuery 添加类和 "data-toggle"来 Bootstrap 导航 anchor

php - 循环遍历序列化数据以将更新插入 MySQL DB

javascript - Jquery 鼠标悬停值

javascript - 选择预填充值时触发 Jquery 文本更改

google-maps - 如何使用flutter在谷歌地图中添加标记?

javascript - Google Map API - 如何更改标记上的默认光标

java - 如何获得谷歌地图标记的图标?