如何按装infoWindow
时间: 2024-06-07 11:11:46 浏览: 13
要在网页上添加infoWindow,需要使用Google Maps JavaScript API。
以下是在Google Maps中添加一个infoWindow的步骤:
1. 在HTML页面的<head>标签中添加以下代码来链接Google Maps JavaScript API:
```
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
```
请将YOUR_API_KEY替换为您的Google Maps API密钥。
2. 添加一个包含Google Map的<div>元素。例如:
```
<div id="map"></div>
```
3. 在页面底部添加以下JavaScript代码:
```
<script>
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var contentString = '<div id="content">' +
'<div id="siteNotice">' +
'</div>' +
'<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
'<div id="bodyContent">' +
'<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
'sandstone rock formation in the southern part of the ' +
'Northern Territory, central Australia. It lies 335 km (208 mi) ' +
'south west of the nearest large town, Alice Springs; 450 km ' +
'(280 mi) by road. Kata Tjuta and Uluru are the two major ' +
'features of the Uluru - Kata Tjuta National Park. Uluru is ' +
'sacred to the Pitjantjatjara and Yankunytjatjara, the ' +
'Aboriginal people of the area. It has many springs, waterholes, ' +
'rock caves and ancient paintings. Uluru is listed as a World ' +
'Heritage Site.</p>' +
'<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
'https://en.wikipedia.org/w/index.php?title=Uluru</a> ' +
'(last visited June 22, 2009).</p>' +
'</div>' +
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Uluru (Ayers Rock)'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
</script>
```
这将创建一个名为initMap()的函数,该函数将在页面加载时自动调用。
4. 在页面底部添加以下CSS代码,以定义infoWindow的样式:
```
<style>
#map {
height: 400px;
width: 100%;
}
#content {
width: 240px;
}
</style>
```
5. 最后,在页面底部调用initMap()函数:
```
<body onload="initMap()">
```
这将在页面加载时显示Google Map,并将一个含有infoWindow的标记放置在地图上。
您可以根据自己的需要自定义infoWindow的内容和样式。