目前開發需要用到地圖，所以就簡單的玩了幾款，我對比了騰訊位置服務跟高德地圖，瞬間犯難了，親們到底是哪一種比較好呢
左邊是騰訊位置的實例，右邊是高德地圖的實例，我是認爲左邊的看着還行，不過我lp 認爲是右邊簡介明瞭，那我選。。。。。高德，其實我不選喪德地圖還有一個原因就是好幾次被坑了氣死我了。
我的話還是基本按JS api2.0來玩地圖，就想象成打怪升級吧，不斷變強吧騷年。
首先跟百度地圖一樣我們需要註冊成爲開發者創建key，
註冊很簡單，或者可以直接短信登錄
註冊成功登錄進入控制檯
在應用管理-> 我的應用下面新增key
在首頁開發支持裏面有很多，可以根據需要選擇，這裏暫時不使用web服務玩耍開篇來點簡單的
好了玩得話也是基於需要以及感興趣的點來的，如果想具體點還是查閱文檔以文檔爲準。
鏈接: 地圖 JSAPI 2.0.
鏈接: 文檔獻上.
創建一個最最基礎的地圖
3d地圖
默認是2D不過不喜歡
重點屬性viewMode:'3D'
// pitch 地圖俯仰角度，有效範圍 0 度- 83 度
// 地圖順時針旋轉角度 rotation
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<title>地圖顯示</title>
<style>
html,
body,
#container {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
<div class="input-card" style="width:16rem">
<h4>創建、銷燬地圖</h4>
<div id="btns">
<div class="input-item">
<button id="create-btn" class="btn" style="margin-right:1rem;">創建地圖</button>
<button id="destroy-btn" class="btn">銷燬地圖</button>
</div>
</div>
</div>
<!-- 加載地圖JSAPI腳本 -->
<script src="https://webapi.amap.com/maps?v=2.0&key=自己的key"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script>
var map = new AMap.Map('container', {
viewMode: '3D', // 默認使用 2D 模式，如果希望使用帶有俯仰角的 3D 模式，請設置 viewMode: '3D',
zoom:17.2, //初始化地圖層級
center: [117.301252, 31.870344] //初始化地圖中心點
});
//map.on("complete")地圖加載完成事件
map.on("complete",function() {
log.success("地圖加載完成！");
});
</script>
</body>
</html>
銷燬地圖的話
只展示js部分
<script>
var map = new AMap.Map('container', {
viewMode: '3D', // 默認使用 2D 模式，如果希望使用帶有俯仰角的 3D 模式，請設置 viewMode: '3D',
zoom:17.2, //初始化地圖層級
center: [117.301252, 31.870344] //初始化地圖中心點
});
map.on("complete",function() {
log.success("地圖加載完成！");
});
//銷燬map對象
function destroyMap() {
map && map.destroy();
log.info("地圖已銷燬");
}
//事件綁定
document.querySelector("#destroy-btn").onclick = destroyMap;
</script>
如果涉及異步或者防止重複加載，官方推薦JSAPI 加載器不過這裏沒用到
入門主要還是說下屬性跟一些方法吧
這樣至少看着不懵
<script>
var map = new AMap.Map('container', {
viewMode: '3D', // 默認使用 2D 模式，如果希望使用帶有俯仰角的 3D 模式，請設置 viewMode: '3D',
zoom:17.2, //初始化地圖層級 我更願意理解爲也就是放大倍數
center: [117.301252, 31.870344] //初始化地圖中心點
});
//那麼當前地圖級別
var zoom = map.getZoom();
//獲取當前地圖中心點
var center = map.getCenter();
//獲取就有設置
//setZoom,setCenter 搭配點擊事件
</script>
限制地圖的範圍
之前有一個需求就是一個旅遊景點只需要展示他們景點的周邊地圖即可，我相信這個比較實用。
<script>
//創建地圖
var map = new AMap.Map('container', {
viewMode : '3D',
zoom : 17.2,
center: [117.301252, 31.870344], //初始化地圖中心點
//默認顯示室內地圖
showIndoorMap: false
});
function logMapInfo() {
//限制的座標 限制的按東北跟西南
var limitBounds = map.getLimitBounds();
if (limitBounds) {
document.querySelector("#ne").innerText = limitBounds.northEast.toString();
document.querySelector("#sw").innerText = limitBounds.southWest.toString();
} else {
document.querySelector("#ne").innerText = document.querySelector("#sw").innerText = "未限定";
}
}
//限制地圖顯示範圍
function lockMapBounds() {
var bounds = map.getBounds();
map.setLimitBounds(bounds);
logMapInfo();
}
//取消地圖顯示限制
function unlockMapBounds() {
map.clearLimitBounds();
logMapInfo();
}
//啓用地圖範圍限定
lockMapBounds();
logMapInfo();
//綁定按鈕事件
document.querySelector("#lock-bounds").onclick = lockMapBounds;
document.querySelector("#unlock-bounds").onclick = unlockMapBounds;
</script>
這樣就不能拖動了
通過map.setStatus修改地圖狀態來初始化地圖
<script>
var mapOpts = {
showIndoorMap: true, // 是否在有矢量底圖的時候自動展示室內地圖，PC默認true,移動端默認false
dragEnable: true, // 地圖是否可通過鼠標拖拽平移，默認爲true
keyboardEnable: true, //地圖是否可通過鍵盤控制，默認爲true
doubleClickZoom: true, // 地圖是否可通過雙擊鼠標放大地圖，默認爲true
zoomEnable: true, //地圖是否可縮放，默認值爲true
rotateEnable: true, // 地圖是否可旋轉，3D視圖默認爲true，2D視圖默認false
}
//創建地圖
var map = new AMap.Map('container');
//可以通過map.setStatus方法動態設置地圖狀態也可以直接在後面加
map.setStatus({
dragEnable: true,
keyboardEnable: true,
doubleClickZoom: true,
zoomEnable: true,
rotateEnable: true
});
var map = new AMap.Map('container',mapOpts );
</script>
不過這裏我想說百度地圖有一點不錯，具體的標記會有信息介紹，不過各家有各家的特色，都玩一玩吧。
後面還會發關於玩地圖的文章，看到這大佬們動動小手點點贊吧~~~~~~