高德地图使用攻略；vue项目引入高德地图实战例子附代码；vue-amap使用步骤和代码示例
在项目中使用地图 我推荐高德地图，理由嘛因为我就会这个。vue中使用高德地图的时候 不要固执的死在vue-amap ，因为这个玩意文档不全，所以还是要依靠高德开放平台：高德开放平台
先上效果图，留住各位帅哥的心：
开发地图项目 当然先去申请key /dev/index 步骤就不说了。申请完key之后 大家可以在此网址自定义地图样式的。
好了 进入正题：在index.html中引入高德地图所需js
<script src="/vue-amap/dist/index.js"></script><!-- 记得去申请key key后面 用&拼接的参数为你用到的那几个高德插件当然你可以 拼接在后面但不用 --><script src='/maps?v=1.4.11&key=bdc127f27ca695f44008dacd9c150584&plugin=AMap.PolyEditor,AMap.CircleEditor,AMap.ToolBar,AMap.MapType,AMap.Scale,AMap.Autocomplete,AMap.PlaceSearch'></script>
在项目main.js中引入 vue-amap
import VueAMap from 'vue-amap';Vue.use(VueAMap);console.log(VueAMap)VueAMap.initAMapApiLoader({key: '7ab53b28352e55dc5754699add0ad862', //申请的key码需要填写的地方，格式为长串字符数字plugin: [//按照你的需要，引入地图的哪些功能，不需要下面这么多"AMap.Autocomplete", //输入提示插件"AMap.PlaceSearch", //POI搜索插件"AMap.Scale", //右下角缩略图插件 比例尺"AMap.OverView", //地图鹰眼插件"AMap.ToolBar", //地图工具条"AMap.MapType", //类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制"AMap.PolyEditor", //编辑 折线多，边形"AMap.CircleEditor", //圆形编辑器插件"AMap.Geolocation", //定位控件，用来获取和展示用户主机所在的经纬度位置"AMap.ControlBar"],v: '1.4.4' // 默认高德 sdk 版本为 1.4.4});
下载所需依赖
npm install vue-amap --save
好了重点来了 ，先看下我的dom和data中定义的数值吧
这是我的数据 和 渲染地图的部分代码 仅借鉴（我也是借鉴别人的）
point(){let markers = [];let circles = []let texts = []let windows=[]let polygons = []let that=this// 此处为基础数据 let pointMarker=[]pointMarker=[{lng:104.072636,lat:30.657486,// 不限长度个数，此坐标为该社区每个角落的坐标path:[[104.072331,30.658017],[104.073404,30.657408],[104.072921,30.656789],[104.071912,30.657362]],title:"九龙广场",text: "九龙广场"},{lng:104.057815,lat:30.656951,// 不限长度个数，此坐标为该社区每个角落的坐标path:[[104.056312,30.659974],[104.058201,30.658285],[104.060518,30.656356],[104.060588,30.655487],[104.059655,30.655533],[104.059022,30.655672],[104.058625,30.654426],[104.055127,30.656715]],title:"人民公园",text: "人民公园"}]pointMarker.forEach((item,index)=>{// 给标点 赋予 数据 markers.push({// 这里面的属性 自己需要啥 写啥 // position: [item.lng,item.lat],zIndex:20,title:item.title,icon: new AMap.Icon({image: 'https://hbbzw-image.oss-cn-/marker-1.gif',size: new AMap.Size(60, 60), //图标大小imageSize: new AMap.Size(60,60)}), events: {click() {that.windows.forEach(window => {window.visible = false; //关闭窗体});// 此处代码作用：点击 点坐标 展示信息窗体时 让点坐标的坐标位于视图中心并且地图放大到最大。that.window = that.windows[index];that.zoom=18that.zoomchanges=18that.center=[item.lng,item.lat]that.$nextTick(() => {that.window.visible = true;//点击点坐标，出现信息窗体});}}})// 多变形覆盖物polygons.push({// 设置多边形不可拖拽移动draggable:false,// 多变形边框线透明度strokeOpacity:1,// 多变形边框线颜色strokeColor:this.bg(),// 多变形边填充色透明度fillOpacity:0,path:item.path,rejectTexture:true,//是否屏蔽自定义地图的纹理events: {click() {}}})// 文本texts.push({position: [item.lng,item.lat],// icon:item.url, //不设置默认蓝色水滴text:item.text,offset:[70,-10],//窗体偏移fillColor:this.bg(), events: {click() {}}})windows.push({position: [item.lng,item.lat],content:"<div class='mapMsg'>"+"<div>"+item.title+"</div>"+"<div>"+"</div>"+"</div>",offset:[-20,-30],//窗体偏移visible: false//初始是否显示})})// 加点this.markers = markers;// 覆盖层this.circles = circlesthis.polygons = polygons// 文本this.texts = texts//加弹窗this.windows=windows},
以上是部分重要代码 仅有参考意义， 详细代码 在我的gitee上，已上传
地址：本人gitee地址
对于高德地图的使用，说实话啊 不难 多看文档，虽然不能一目了然，然能达到事半功倍的效果。我第一次使用的时候 就因为没有多看文档，耽搁了好多时间。
多多支持！！！
