作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
与其他人在本网站上遇到的问题类似,它只显示所有标记中最后一个标记的信息窗口信息。似乎无法使用给出的任何解决方案来解决此问题。此外,我的最后一个标记根本不显示信息窗口。
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="data2.json"></script>
<script type="text/javascript" src="js/markerclusterer.js"></script>
<script type="text/javascript">
google.load('maps', '3', {
other_params: 'sensor=false'
});
google.setOnLoadCallback(initialize);
function initialize() {
var center = new google.maps.LatLng(55.4419, -4.1419);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var markers = [];
for (var i = 0, dataPhoto; dataPhoto = data.markers[i]; i++) {
var latLng = new google.maps.LatLng(dataPhoto.latitude,dataPhoto.longitude);
var theTitle = dataPhoto.address;
var contentString = '<div align="left"><img src="logo.gif" alt="" width="242" height="71" /><br /><br /><p style="color:#000000;">' + data.markers[i].address + '<br />' + dataPhoto.telephone + '</p></div>';
var infowindow = new google.maps.InfoWindow({
content: contentString,
});
var thisIcon = 'markers/image.png';
for (var i = 0, marker; marker = markers[i]; i++) {google.maps.event.addListener(marker, 'click', function() {infowindow.open(map,this);});
}
var marker = new google.maps.Marker({
position: latLng,
clickable: true,
title: theTitle,
icon: thisIcon,
});
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);
}
</script>
非常感谢任何帮助!
最佳答案
我还没有测试过这个,但它应该可以工作 - 也请看看:http://code.google.com/apis/maps/documentation/javascript/events.html#EventClosures
<script src="http://www.google.com/jsapi">
</script>
<script type="text/javascript" src="data2.json">
</script>
<script type="text/javascript" src="js/markerclusterer.js">
</script>
<script type="text/javascript">
google.load('maps', '3', {
other_params: 'sensor=false'
});
google.setOnLoadCallback(initialize);
function initialize(){
var center = new google.maps.LatLng(55.4419, -4.1419);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var markers = [];
for (var i = 0, dataPhoto; dataPhoto = data.markers[i]; i++) {
var latLng = new google.maps.LatLng(dataPhoto.latitude, dataPhoto.longitude);
var theTitle = dataPhoto.address;
var contentString = '<div align="left"><img src="logo.gif" alt="" width="242" height="71" /><br /><br /><p style="color:#000000;">' + data.markers[i].address + '<br />' + dataPhoto.telephone + '</p></div>';
var thisIcon = 'markers/image.png';
var marker = new google.maps.Marker({
position: latLng,
clickable: true,
title: theTitle,
icon: thisIcon,
});
attachIWindow(contentString, marker);
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);
}
function attachIWindow(content, marker){
var infowindow = new google.maps.InfoWindow({
content: content,
});
google.maps.event.addListener(marker, 'click', function(){
infowindow.open(map, marker);
});
}
</script>
关于javascript - 谷歌地图 api 3 上的信息窗口帮助,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3979486/
leaflet:一个开源并且对移动端友好的交互式地图 JavaScript 库 中文文档: https://leafletjs.cn/reference.html 官网(英文): ht
我是一名优秀的程序员,十分优秀!