通過 CDN 的方式我們可以很容易地使用 vue-amap 寫出一個 Hello world 頁面。
什么是CDN？
定義是這樣的：CDN是構建在網絡之上的內容分發網絡，依靠部署在各地的邊緣服務器，通過中心平台的負載均衡、內容分發、調度等功能模塊，使用戶就近獲取所需內容，降低網絡擁塞，提高用戶訪問響應速度和命中率。
通俗的說就是：在本例子中調用網絡上的js
代碼如下
<!DOCTYPE html>
<html>
<head>
<title>demo | vue-amap</title>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
<el-amap vid="amap"></el-amap>
</div>
</body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入組件庫 -->
<script src="https://unpkg.com/vue-amap/dist/index.js"></script>
<script>
// 初始化高德地圖的 key 和插件
window.VueAMap.initAMapApiLoader({
key: 'YOUR_KEY',
plugin: ['Autocomplete', 'PlaceSearch', 'Scale', 'OverView', 'ToolBar', 'MapType', 'PolyEditor', 'AMap.CircleEditor'],
// 默認高德 sdk 版本為 1.4.4
v: '1.4.4'
});
new Vue({
el: '#app',
data: function(){
return { }
}
});
</script>
</html>
這邊要注意的是： 在js中 key需要去高德地圖api中去申請
還有一點注意的是，我們輸入key之后正常運行的情況下已經把地圖加載到了頁面，但是需要設置一下寬高才能看到。
看完有幫助記得點個贊！