项目中 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/

此时地图就加载完成了,后面将写入高德地图中一些常用功能