谷歌地图API v3 - 通过外部单击打开信息窗口
google maps api v3 - open infowindow from an external click
所以我有一个像这样初始化的 V3 映射:
function init() {
var mapCenter = new google.maps.LatLng(51.5081289,-0.128005);
var map = new google.maps.Map(document.getElementById('map'), {
'zoom': 6,
'center': mapCenter,
'mapTypeId': google.maps.MapTypeId.ROADMAP,
panControl: false,
mapTypeControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.LEFT_TOP
},
});
以及如下所示的大量标记:
var marker25837500 = new google.maps.Marker({
map: map,
pop_title: 'blah blah',
pop_wind: 'more blah',
zIndex: 999,
icon: 'images/map_icons/s6.png'
});
google.maps.event.addListener(marker25837500, 'click', onMarkerClick);
最后,我有一个功能可以在单击每个制造商时打开信息窗口:
var infoWindow = new google.maps.InfoWindow;
var onMarkerClick = OpenInfoWindow;
function OpenInfoWindow() {
var marker = this;
infoWindow.setContent('<h3>' + marker.pop_title + '</h3>' +
marker.pop_body);
infoWindow.open(map, marker);
};
google.maps.event.addListener(map, 'click', function() {
infoWindow.close();
});
我的问题是,当单击页面内部时,我需要做什么才能使特定标记(例如 marker25837500)显示其信息窗口 - 也许是这样的:
<div id="marker25837500">click to see infoWindow!</div>
我相信这很容易,但我只是可以看到我的方式!
谢谢
您可以使用
trigger
事件。
$('#marker25837500').click(function () {
google.maps.event.trigger(marker25837500, 'click')
})
检查这个- https://developers.google.com/maps/documentation/javascript/reference#event
编辑:还注意到单击marker25837500
时您正在调用onMarkerClick()
,但您将其他函数命名为OpenInfoWindow()
因此您可能也需要更改它。
您不必做任何异常操作或在标记上模拟click
;只需确保可以访问OpenInfoWindow
函数:
//This is the simple case:
var myDiv = document.getElementById( "marker25837500" );
google.maps.event.addDomListener( myDiv, "click", OpenInfoWindow );
//Or if you have other things that you want to accomplish when this occurs:
var myDiv = document.getElementById( "marker25837500" );
google.maps.event.addDomListener( myDiv, "click", function() {
OpenInfoWindow();
//Do other stuff here
});
只要InfoWindow
在范围内(调用OpenInfoWindow
函数时可以访问),这应该可以正常工作。
相关文章:
- 访问布局信息是否也会导致浏览器重排
- 定义完全独立的样式信息
- 使用html2canvas获取基本信息
- JS表单提交"无法使用Chrome数据保护程序加载此页面.尝试重新加载页面.调试信息:POST CISmtuK
- 从信息框调用弹出图像库
- 如何在不传递此信息的情况下查找被调用的元素
- 将谷歌自动完成地址信息放在页面上,而不是表格中
- 如何通过解析类信息来使用jQuery创建类
- 包含数据库中相关信息的开放模态
- 单击按钮即可在浏览器的新选项卡中打开 Sapui5 详细信息页面
- 如何调整信息窗口的大小并点击按钮?+更改信息窗口的内容
- ng在更新$scope后重复不更新信息
- 谷歌地图点击潜水触发信息窗口
- 根据CHECKBOX输入值动态更新DIV信息
- 如何使用ember.js在操作中传递当前上下文中目标旁边的信息
- Jquery on单击“显示信息”
- 将FlowPlayer嵌入谷歌地图信息窗口
- AEM(cq5)使用组件内的信息
- 如何在完整日历中的当天点击时显示活动详细信息
- 使用javascript后台脚本获取Yotutube频道信息