vue-amap（高德地图）使用步骤和代码示例

高德地图使用攻略；vue项目引入高德地图实战例子附代码；vue-amap使用步骤和代码示例

在项目中使用地图 我推荐高德地图，理由嘛因为我就会这个。vue中使用高德地图的时候 不要固执的死在vue-amap ，因为这个玩意文档不全，所以还是要依靠高德开放平台：高德开放平台
先上效果图，留住各位帅哥的心：
开发地图项目 当然先去申请key https://console.amap.com/dev/index 步骤就不说了。申请完key之后 大家可以在此网址自定义地图样式的。



好了 进入正题：在index.html中引入高德地图所需js

<script src="https://unpkg.com/vue-amap/dist/index.js"></script>
<!-- 记得去申请key  key后面 用&拼接的参数为你用到的那几个高德插件当然你可以  拼接在后面但不用  -->
<script src='http://webapi.amap.com/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-beijing.aliyuncs.com/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=18
          that.zoomchanges=18
          that.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 = circles
      this.polygons = polygons
      // 文本
      this.texts = texts
      //加弹窗
      this.windows=windows
      },

以上是部分重要代码 仅有参考意义， 详细代码 在我的gitee上，已上传

地址：本人gitee地址

对于高德地图的使用，说实话啊 不难 多看文档，虽然不能一目了然，然能达到事半功倍的效果。我第一次使用的时候 就因为没有多看文档，耽搁了好多时间。

多多支持！！！