用户投稿串接地图 JavaScript API 中虽然相较起来难度较高，不过官方文件写的也很简单易懂。
使用方式
1.宣告 HTML5 文件，将 JS CDN 引入档案(要先申请金钥)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>google maps api</title> <script async src="https://maps.googleapis.com/maps/api/js?key=你的金钥&callback=initMap"> </script></head><body> <div id="map"></div></body></html>2.设定 map 容器的高度为100%，否则会看不到内容
<style> #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }</style><script> let map; function initMap() { map = new google.maps.Map(document.getElementById("map"), { // 中心点位置 center: { lat: 23.197250366210938, lng: 119.42967987060547 }, zoom: 18, // 地图缩放比例 (0-20) maxZoom: 20, // 使用者能缩放地图的最大比例 minZoom: 3, // 使用者能缩放地图的最小比例 streetViewControl: false, // 是否显示右下角街景小人 mapTypeControl: false // 使用者能否切换地图样式：一般、卫星图等 }); }</script>参考来源：https://developers.google.com/maps/documentation/javascript/overview#maps_map_simple-html
微信扫一扫打赏
支付宝扫一扫打赏
