谷歌地图v3打开信息窗口的外部HTML链接点击
google maps v3 open infowindow on click of external html link
不知道是否有人可以帮助我,我已经设置了一个谷歌地图都很好地工作。唯一的事情我不能工作出如何做的是打开基于ID的信息窗口从外部的html链接,不是在JS。
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>
任何帮助都将不胜感激
理查德:)
<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就是小菜一碟。
相关文章:
- HTML表单提交时未执行外部函数
- 使用html中的外部javascript进行数据验证
- HTML外部javascript加载另一个javascript
- 什么更好?使用iframe或jQuery之类的东西在外部网站中加载HTML文件
- Javascript:获取“;FORM”;它是在.html到外部.js文件中创建的
- AngularJS:带有HTML和angular表达式的指令;编译”;具有外部范围的内容
- 正在创建网页,并希望将外部链接调用为html和css
- Javascript从外部站点获取html
- 将HTML文件中的变量与外部JS文件一起使用
- 从HTML中的外部JS文件调用函数
- 如何用HTML中的JSON外部文件填充下拉按钮
- 在html文件中添加了多个外部javascript,其中一个停止工作
- 将变量从服务器上的外部文件加载到 HTML 文档中
- 将外部 SVG 和包含 JavaScript 加载到 HTML 中
- 不;t在ASP.NET MVC4中的.cs.html外部激发了Javascript函数
- 禁用 HTML 外部的 iframe 上的导航
- 如何在javascript中将数组的值和初始值重新声明到html外部
- 从HTML外部打开模态
- 如何从html外部调用jQuery函数:animate ?
- Playframework-在main.html外部附加JS