2013-02-28 126 views
0

不知道是否有人可以帮助我,我已经安装了谷歌地图所有作品很好。唯一不能解决问题的方法是打开一个基于ID的信息窗口,该信息窗口来自不在JS中的外部HTML链接。谷歌地图v3打开infowindow点击外部html链接

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> 

任何帮助将衷心感谢

理查德:)

+0

你是什么意思“基于来自外部html链接的ID不在JS中”?该ID必须以某种方式引用标记。它是标记的属性吗?打开标记上现有的infowindow最简单的方法是触发一个“点击”事件,但您需要某种方式来引用标记。 – geocodezip 2013-03-01 00:09:02

回答

3
<a href="javascript:show(7)">The Golden Goose</a> 
在你的js

然后有一个函数来打开信息窗口(如显示())从需要的属性该链接(开放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是一块蛋糕。

相关问题