谷歌地图 v3 在点击外部 html 链接时打开信息窗口答案

【问题标题】：google maps v3 open infowindow on click of external html link谷歌地图 v3 在点击外部 html 链接时打开信息窗口
【发布时间】：2013-02-15 07:23:52
【问题描述】：

想知道是否有人可以帮助我，我已经设置了一个谷歌地图，一切都很好。我唯一不知道该怎么做的就是从一个不在 JS 中的外部 html 链接中打开一个基于 ID 的信息窗口。

function initialize() {
// Create the map 
// No need to specify zoom and center as we fit the map further down.
var map = new google.maps.Map(document.getElementById("map"), {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true
});
infowindow = new google.maps.InfoWindow();
// Custom markers
var icon = "img/marker.png";

// Define the list of markers.
// This could be generated server-side with a script creating the array.
var markers = [
    { val:0, lat: -40.149049, lng: 172.033095, title: "Title", html: "<div style='text-align:left'><h4 style='color:#0068a6;font-size:16px;margin:0px 0px 10px 0px;'>Title</h4><strong>Telephone</strong><br /><br />Address</div>" },
    { val:1, lat: -41.185765, lng: 174.827516, title: "Title", html: "<div style='text-align:left'><h4 style='color:#0068a6;font-size:16px;margin:0px 0px 10px 0px;'>Title</h4><strong>Telephone</strong><br /><br />Address</div>" },
];
// Create the markers ad infowindows.
for (index in markers) addMarker(markers[index]);
function addMarker(data) {
  // Create the marker
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(data.lat, data.lng),
        map: map,
        title: data.title,
        icon: icon,
        id: data.val
    });

    // Create the infowindow with two DIV placeholders
    // One for a text string, the other for the StreetView panorama.
    var content = document.createElement("DIV");
    var title = document.createElement("DIV");
    title.innerHTML = data.html;
    content.appendChild(title);
    // Open the infowindow on marker click
    google.maps.event.addListener(marker, "click", function() {
        infowindow.setContent(content);
        infowindow.open(map, this);
        map.setCenter(this.position);
        console.log(this.id);
    });
}

// Zoom and center the map to fit the markers
// This logic could be conbined with the marker creation.
// Just keeping it separate for code clarity.
var bounds = new google.maps.LatLngBounds();
for (index in markers) {
    var data = markers[index];
    bounds.extend(new google.maps.LatLng(data.lat, data.lng));
}
map.fitBounds(bounds);
}

<p id="1">link to open marker</p>

任何帮助将不胜感激

理查德:)

【问题讨论】：

“基于不在 JS 中的外部 html 链接的 ID”是什么意思？该 ID 必须以某种方式引用标记。它是标记的属性吗？在标记上打开现有信息窗口的最简单方法是在其上触发“点击”事件，但您需要一些方法来引用标记。

标签： javascript google-maps-api-3 infowindow

【解决方案1】：

<a href="javascript:show(7)">The Golden Goose</a>

然后在你的 js 中有一个函数来打开信息窗口（例如 show()），它从该链接获取属性（打开 id 7）。

function show(id){
  myid = id;
  if(markers[myid]){
    map.panTo(markers[myid].getPoint());
    setTimeout('GEvent.trigger(markers[myid], "click")',500);
    map.hideControls();
  }
}

这是我之前在 v2 中的一个标记管理器中使用的功能。您必须确保在设置时为每个标记设置一个 id，然后才能调用它。

我确定的一件事（为了简化问题）是确保地图标记集/数组与我在页面上使用的 sql 结果完全相同。这样一来，使用 id 就轻而易举了。

【讨论】：