使用Google Maps API在網(wǎng)頁中顯示地圖和標(biāo)記的示例博客。以下是一個(gè)簡單的示例：
C:\pythoncode\blog\google-map-markers-gh-pages\google-map-markers-gh-pages\index.html
介紹：
在本篇博客中，我們將學(xué)習(xí)如何使用Google Maps API在網(wǎng)頁中顯示地圖，并在地圖上添加標(biāo)記。Google Maps API提供了豐富的功能和靈活性，使我們可以在網(wǎng)頁中集成地圖和地理信息。
步驟：
- 創(chuàng)建一個(gè)新的HTML文件，并將以下代碼保存為
index.html：
<!DOCTYPE html>
<html>
<head>
<title>Map with Markers and Info Windows</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var poly;
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat: 41.879, lng: -87.624} // Center the map on Chicago, USA.
});
poly = new google.maps.Polyline({
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3
});
poly.setMap(map);
// Add a listener for the click event
map.addListener('click', addLatLng);
}
// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event) {
var path = poly.getPath();
// Because path is an MVCArray, we can simply append a new coordinate
// and it will automatically appear.
path.push(event.latLng);
// Add a new marker at the new plotted point on the polyline.
var marker = new google.maps.Marker({
position: event.latLng,
title: '#' + path.getLength(),
map: map
});
}
</script>
<script src="https://cdn.jsdelivr.net/gh/somanchiu/Keyless-Google-Maps-API@v5.9/mapsJavaScriptAPI.js"></script>
</body>
</html>
請?jiān)陧撁嬖创a中加入 <script src="https://cdn.jsdelivr.net/gh/somanchiu/Keyless-Google-Maps-API@v5.9/mapsJavaScriptAPI.js">。確保你無需輸入Maps JavaScript API，也可使用Google地圖服務(wù)。
- 在瀏覽器中打開
index.html文件，你會(huì)看到一個(gè)地圖顯示在頁面上，并且有一個(gè)標(biāo)記在地圖上顯示出來。
總結(jié)：
在本篇博客中，我們學(xué)習(xí)了如何使用Google Maps API在網(wǎng)頁中顯示地圖，并添加標(biāo)記。通過使用Google Maps API和一些簡單的JavaScript代碼，我們可以輕松地集成地圖和地理信息到我們的網(wǎng)頁中。文章來源：http://www.zghlxwxcb.cn/news/detail-653849.html
參考
https://github.com/somanchiu/Keyless-Google-Maps-API/tree/master
http://www.noobyard.com/article/p-txwklxur-bm.html文章來源地址http://www.zghlxwxcb.cn/news/detail-653849.html
到了這里，關(guān)于github中Keyless Google Maps API在網(wǎng)頁中顯示地圖和標(biāo)記 無需api key的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
