添加用于在 Google 地图 API v3 中打开信息窗口的链接
Adding links that open an info window in Google maps API v3
添加链接时遇到问题,这些链接将居中并在我的谷歌地图上打开一个信息窗口。标记及其信息窗口在地图本身中工作正常。
真正的问题是构造一个我的 onclick 函数可以正确引用的对象。我的面向对象的Javascript知识不稳定,我只是没有看到解决方案。
地图是通过在页面加载时调用的函数加载的,我有一个单独的函数,该函数在单击页面内的 href 时调用。代码如下。
function addMap(addressesJSON, id){
var addresses = eval('(' + addressesJSON + ')');
var cenLat = 41.677389;
var cenLng = -72.384294;
var latLow = 41.4;
var lngLow = -72.8;
var latHigh = 41.8;
var lngHigh = -71.9;
if (addresses.length){
for (var i in addresses){
addresses[i].lat = parseFloat(addresses[i].lat);
addresses[i].lng = parseFloat(addresses[i].lng);
if (i == 0){
latLow = addresses[i].lat;
latHigh = addresses[i].lat;
lngLow = addresses[i].lng;
lngHigh = addresses[i].lng;
} else {
if (addresses[i].lat < latLow){
latLow = addresses[i].lat;
}
if (addresses[i].lat > latHigh){
latHigh = addresses[i].lat;
}
if (addresses[i].lng < lngLow){
lngLow = addresses[i].lng;
}
if (addresses[i].lng > lngHigh){
lngHigh = addresses[i].lng;
}
}
address = "<span style='"color: #0000ff'">" + addresses[i].name + "</span><br/>" + addresses[i].address + "<br/>Directions: <a href='"#'" onClick='"GPopUp('http://maps.google.com/maps?daddr=" + addresses[i].address + "&f=li&hl=en&ie=UTF8&om=1')'">To</a> - <a href='"#'" onClick='"popUp('http://maps.google.com/maps?saddr=" + addresses[i].address + "&f=li&hl=en&ie=UTF8&om=1')'">From</a>";
addresses[i].address = address;
}
cenLat = (latLow + latHigh) / 2;
cenLng = (lngLow + lngHigh) / 2;
}
var mapOptions = {
center: new google.maps.LatLng(cenLat, cenLng),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Display a map on the page
var map = new google.maps.Map(document.getElementById(id), mapOptions);
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
for (var i in addresses){
var letter = addresses[i].letter;
var data = addresses[i].address;
var myLatlng = new google.maps.LatLng(addresses[i].lat, addresses[i].lng);
var latlng = new google.maps.LatLng(addresses[i].lat, addresses[i].lng);
bounds.extend(latlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: addresses[i].name,
icon: "http://maps.google.com/mapfiles/marker" + letter + ".png"
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function () {
// Center on marker
map.setCenter(marker.getPosition());
// Set the data for the info window
infowindow.setContent(data);
// show the infowindow
infowindow.open(map, marker);
});
})(marker, data);
}
map.fitBounds(bounds);
}
以及单击时触发的函数,我想打开相应的信息窗口。
function moveCenter(lat, lng, letter){
google.maps.event.trigger(marker[letter], "click");
}
有关如何构建标记对象数组并让我的 moveCenter 函数看到它的任何帮助将不胜感激。
看起来你只需要在代码中添加这一行:
markers[letter] = marker;
并更改您的功能:
function moveCenter(lat, lng, letter){
google.maps.event.trigger(markers[letter], "click");
}
(确保标记数组在全局范围内)
markers = [];
function addMap(addressesJSON, id){
var addresses = eval('(' + addressesJSON + ')');
var cenLat = 41.677389;
var cenLng = -72.384294;
var latLow = 41.4;
var lngLow = -72.8;
var latHigh = 41.8;
var lngHigh = -71.9;
if (addresses.length){
for (var i in addresses){
addresses[i].lat = parseFloat(addresses[i].lat);
addresses[i].lng = parseFloat(addresses[i].lng);
if (i == 0){
latLow = addresses[i].lat;
latHigh = addresses[i].lat;
lngLow = addresses[i].lng;
lngHigh = addresses[i].lng;
} else {
if (addresses[i].lat < latLow){
latLow = addresses[i].lat;
}
if (addresses[i].lat > latHigh){
latHigh = addresses[i].lat;
}
if (addresses[i].lng < lngLow){
lngLow = addresses[i].lng;
}
if (addresses[i].lng > lngHigh){
lngHigh = addresses[i].lng;
}
}
address = "<span style='"color: #0000ff'">" + addresses[i].name + "</span><br/>" + addresses[i].address + "<br/>Directions: <a href='"#'" onClick='"GPopUp('http://maps.google.com/maps?daddr=" + addresses[i].address + "&f=li&hl=en&ie=UTF8&om=1')'">To</a> - <a href='"#'" onClick='"popUp('http://maps.google.com/maps?saddr=" + addresses[i].address + "&f=li&hl=en&ie=UTF8&om=1')'">From</a>";
addresses[i].address = address;
}
cenLat = (latLow + latHigh) / 2;
cenLng = (lngLow + lngHigh) / 2;
}
var mapOptions = {
center: new google.maps.LatLng(cenLat, cenLng),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Display a map on the page
var map = new google.maps.Map(document.getElementById(id), mapOptions);
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
for (var i in addresses){
var letter = addresses[i].letter;
var data = addresses[i].address;
var myLatlng = new google.maps.LatLng(addresses[i].lat, addresses[i].lng);
var latlng = new google.maps.LatLng(addresses[i].lat, addresses[i].lng);
bounds.extend(latlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: addresses[i].name,
icon: "http://maps.google.com/mapfiles/marker" + letter + ".png"
});
markers[letter] = marker;
(function (marker, data) {
google.maps.event.addListener(marker, "click", function () {
// Center on marker
map.setCenter(marker.getPosition());
// Set the data for the info window
infowindow.setContent(data);
// show the infowindow
infowindow.open(map, marker);
});
})(marker, data);
}
map.fitBounds(bounds);
}
相关文章:
- 访问布局信息是否也会导致浏览器重排
- 定义完全独立的样式信息
- 使用html2canvas获取基本信息
- JS表单提交"无法使用Chrome数据保护程序加载此页面.尝试重新加载页面.调试信息:POST CISmtuK
- 从信息框调用弹出图像库
- 如何在不传递此信息的情况下查找被调用的元素
- 将谷歌自动完成地址信息放在页面上,而不是表格中
- 如何通过解析类信息来使用jQuery创建类
- 包含数据库中相关信息的开放模态
- 单击按钮即可在浏览器的新选项卡中打开 Sapui5 详细信息页面
- 如何调整信息窗口的大小并点击按钮?+更改信息窗口的内容
- ng在更新$scope后重复不更新信息
- 谷歌地图点击潜水触发信息窗口
- 根据CHECKBOX输入值动态更新DIV信息
- 如何使用ember.js在操作中传递当前上下文中目标旁边的信息
- Jquery on单击“显示信息”
- 将FlowPlayer嵌入谷歌地图信息窗口
- AEM(cq5)使用组件内的信息
- 如何在完整日历中的当天点击时显示活动详细信息
- 使用javascript后台脚本获取Yotutube频道信息