谷歌地图API 3-信息窗口问题
Google Maps API 3 - Info Window Issue
我需要添加什么&在哪里-让我的标记弹出信息窗口,使用我的var位置txt?
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
var brooklyn = new google.maps.LatLng(48.1391265, 11.580186300000037);
var MY_MAPTYPE_ID = 'custom_style';
function initialize() {
var mapOptions = {
zoom: 2,
center: new google.maps.LatLng(48.1391265, 11.580186300000037),
disableDefaultUI: true,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
panControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [ { stylers: [ { hue: "#098AAD" } ] } ]
}
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
setMarkers(map, locations);
}
var locations = [
['Plano TX', 33.01984, -96.69889, 13],
['Hemel Hempstead UK', 51.75324, -0.44863, 12],
['Dubai', 25.27114, 55.30748, 11],
['San Francisco CA', 37.77493, -122.41942, 10],
['Chicago IL', 41.87811, -87.62980, 9],
['New York NY', 40.71435, -74.00597, 8],
['Troy MI', 42.60559, -83.14993, 7],
['Santa Monica CA', 34.01945, -118.49119, 6],
['St Peters MO', 38.78747, -90.62989, 5],
['Pittsford NY', 43.09062, -77.51500, 4],
['Las Vegas NV', 36.11465, -115.17282, 3],
['Haidian Beijing', 39.95991, 116.29805, 2],
['New Delhi', 28.63531, 77.22496, 1]
];
function setMarkers(map, locations) {
var image = {
url: 'images/marker-rmg.png',
size: new google.maps.Size(32, 32),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(16, 32)
};
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
for (var i = 0; i < locations.length; i++) {
var location = locations[i];
var myLatLng = new google.maps.LatLng(location[1], location[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
shape: shape,
title: location[0],
zIndex: location[3]
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas" style="height: 300px;"></div>
创建一个全局变量(或在setMarkers
函数内),infowindow
:
var infowindow = new google.maps.InfoWindow({
content: ""
});
然后在循环中,调用一个新函数,传递您需要的各种参数:
for (var i = 0; i < locations.length; i++) {
var location = locations[i];
var myLatLng = new google.maps.LatLng(location[1], location[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
shape: shape,
title: location[0],
zIndex: location[3]
});
bindInfoWindow(marker, map, infowindow, location[0]);
}
然后创建一个新的全局函数,将点击事件绑定到标记,并打开具有指定内容的信息窗口:
function bindInfoWindow(marker, map, infowindow, strDescription) {
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(strDescription);
infowindow.open(map, marker);
});
}
更新:这是我使用的完整代码
<script>
var map;
var brooklyn = new google.maps.LatLng(48.1391265, 11.580186300000037);
var MY_MAPTYPE_ID = 'custom_style';
var locations = [
['Plano TX', 33.01984, -96.69889, 13],
['Hemel Hempstead UK', 51.75324, -0.44863, 12],
['Dubai', 25.27114, 55.30748, 11],
['San Francisco CA', 37.77493, -122.41942, 10],
['Chicago IL', 41.87811, -87.62980, 9],
['New York NY', 40.71435, -74.00597, 8],
['Troy MI', 42.60559, -83.14993, 7],
['Santa Monica CA', 34.01945, -118.49119, 6],
['St Peters MO', 38.78747, -90.62989, 5],
['Pittsford NY', 43.09062, -77.51500, 4],
['Las Vegas NV', 36.11465, -115.17282, 3],
['Haidian Beijing', 39.95991, 116.29805, 2],
['New Delhi', 28.63531, 77.22496, 1]
];
function bindInfoWindow(marker, map, infowindow, strDescription) {
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(strDescription);
infowindow.open(map, marker);
});
}
function setMarkers(map, locations) {
var infowindow = new google.maps.InfoWindow({
content: ""
});
var image = {
url: 'images/marker-rmg.png',
size: new google.maps.Size(32, 32),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(16, 32)
};
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
var i, location, myLatLng, marker;
for (i = 0; i < locations.length; i++) {
location = locations[i];
myLatLng = new google.maps.LatLng(location[1], location[2]);
marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
shape: shape,
title: location[0],
zIndex: location[3]
});
bindInfoWindow(marker, map, infowindow, location[0]);
}
}
function initialize() {
var mapOptions = {
zoom: 2,
center: new google.maps.LatLng(48.1391265, 11.580186300000037),
disableDefaultUI: true,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
panControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [ { stylers: [ { hue: "#098AAD" } ] } ]
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
setMarkers(map, locations);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
您需要将click事件绑定到标记,即在创建标记后,您需要将它们存储在数组中。然后添加以下代码
var marker = new google.maps.Marker({
position: position
});
var infowindow = new google.maps.InfoWindow({
content:"Any content or latitude longitude info"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
这里有点棘手,即如果有多个标记,则需要相应地构建marker
变量。在您的情况下,您可以将for循环计数器"i"附加到标记变量(如markr_+i),然后在同一循环内的这些变量上触发click事件。
相关文章:
- 为什么不'我的窗口滚动事件根本没有启动.其他答案没有解决问题
- 为什么我在以编程方式打开窗口时遇到问题
- j查询模式窗口,刷新父问题
- 根据窗口宽度修剪字符串,调整大小时出现问题
- 弹出警报窗口问题
- JavaScript-弹出窗口阻止程序问题
- highcharts饼图窗口调整大小问题
- Javascript-window.open()弹出窗口大小问题
- 通过防止窗口事件问题防止双重提交
- 单元测试窗口位置分配的角度问题
- jsp页面的问题-不显示弹出窗口
- 无法使用谷歌地图在“文档”上执行“写入”(信息窗口问题)
- ACF谷歌地图 - 信息窗口问题
- 谷歌地图API 3-信息窗口问题
- Jquery动画,设置间隔和非活动窗口问题
- ios9/safari上的弹出窗口问题
- 在移动safari弹出窗口问题
- 创建一个自定义的谷歌地图与多个标记和弹出窗口-问题
- 如何解决“窗口”问题?onDomReady不是函数"问题
- 谷歌地图信息窗口问题