HTML5 地圖是全球范圍內(nèi)廣泛使用的技術(shù)之一，它為網(wǎng)站開(kāi)發(fā)人員提供了一個(gè)穩(wěn)定、快速、功能強(qiáng)大的平臺(tái)。為方便大家在開(kāi)發(fā)中使用，下面就為大家提供一份 HTML5 地圖代碼大全，供大家參考使用。

1. 創(chuàng)建地圖：

<div id="map"></div>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: { lat: -34.397, lng: 150.644 }
});
</script>

2. 添加標(biāo)記：

var marker = new google.maps.Marker({
position: { lat: -34.397, lng: 150.644 },
map: map,
title: 'Sydney'
});

3. 添加信息窗口：

var infowindow = new google.maps.InfoWindow({
content: '<h1>Sydney</h1><p>This is the best city in the world!</p>'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});

4. 添加多個(gè)標(biāo)記：

var markers = [
{ position: { lat: -34.397, lng: 150.644 }, title: 'Sydney' },
{ position: { lat: -33.856, lng: 151.215 }, title: 'Bondi Beach' },
{ position: { lat: -33.917, lng: 151.234 }, title: 'Coogee Beach' },
{ position: { lat: -34.001, lng: 151.124 }, title: 'Cronulla Beach' },
{ position: { lat: -33.893, lng: 151.276 }, title: 'Maroubra Beach' }
];
for (var i = 0; i < markers.length; i++) {
var marker = new google.maps.Marker({
position: markers[i].position,
map: map,
title: markers[i].title
});
}

5. 標(biāo)記聚合：

var markerCluster = new MarkerClusterer(map, markers,
{ imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' });

通過(guò)以上的 HTML5 地圖代碼大全，相信對(duì)于網(wǎng)站開(kāi)發(fā)人員來(lái)說(shuō)將大有幫助。大家可以根據(jù)自己的需要進(jìn)行修改和添加，達(dá)到更好的應(yīng)用效果。