項目中 vue與高德地圖一塊兒使用 (一)

 vue中使用高德地圖的方式(這裏介紹我本身知道的方式)

　　(一). 第一種script引入

　　第一步. script引入的方式,引入到index.html中,

　　第二步. vue項目中build文件夾下的webpack.base.config.js中須要配置,寫在最下面''node{}''中就能夠

　　　　externals: {

　　　　　　'AMap': 'AMap',

　　　　　　'Loca': 'Loca',

　　　　　　'AMapUI': 'AMapUI'

　　　　}

　　第三步. 而後在項目中能夠直接用 import AMap from AMap

　　<style>

　　　　#container{width:100%;height:500px;}

　　</style>

　　<template>

　　　　<div id='container'></div>

　　</template>

　　<script>

　　export default {

　　　　data () {

　　　　　　return {

　　　　　　　　map: null

　　　　　　}

　　　　},

　　　　mounted () {　　

　　　　　　this.map = new AMap.map('container(地圖容器,id選擇器)', {

　　　　　　　　content: [] //中心點

　　　　　　　　zooms: [5-11] // 地圖縮放級別(作了限制),若不作限制則是 zoom: num

　　　　　　})

　　　　}

　　}

　　</script>

　　(二).第二種 vue-amap 一套專門用於vue的高德地圖插件

　　　　須要npm倉庫安裝

　　　　npm install vue-amap -S

　　　　而後在main.js入口文件中引入高德地圖,分發出去,讓每一個組件均可以使用,

　　　　import AMap from 'vue-amap'

　　　　Vue.use(AMap)

　　　　// 初始化地圖

　　　　AMap.initAMapApiLoader({

　　　　　　// 高德的key

　　　　　　key: 'YOUR_KEY',

　　　　　　// 插件集合

　　　　　　plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor']

　　　　})

　　　　而後在組件中直接調用插件中封裝好的組件就能夠了,例如

　　　　　<el-amap vid="amapDemo" :zoom="zoom" :center="center"></el-amap>

　　　　詳情參見官方文檔 https://elemefe.github.io/vue-amap/

此時地圖就加載完成了,後面將寫入高德地圖中一些經常使用功能