VUE 2.0 引入高德地图,自行封装组件

1. 高德地图官网 申请帐号， 申请相应（JavaScript API）的 Key

2. 在项目中引入， 这里和其他的引入不同的是 直接在 index.html， 不是在 main.js 引入， 博主尝试过把JS文件clone到本地，然后在main.js中引入 但是失败了

3. 在 webpack.base.conf.js 中 设置 externals，  忘记设置的报错好像是    amap is not defined

4. 根据业务需求， 封装自己的 map组件

博主封装的组件: 指定线路、覆盖区域、点聚合等 

 5. 效果图

　　5.1 点聚合 （虚拟数据 points.js）

　　

　　5.2 线路规划

　　

　　说明： step 按钮是开始， 再次按下是暂停  并且记录当前的marker点数

　　　　　提交(线路)  是确认所有marker点，

　　　　　微调  是调整节点， 再次按下是调整完毕（调整状态时， 是无法提交数据的）

　　　　　提交数据  是将当前线路的所有点(经纬度) 提交

　　　　　重置  是clear所有操作

 

　　5.3  覆盖区域

　　　　

　　　　说明：   step 同上  开始/暂停

　　　　　　　　提交(区域)   确认覆盖区域

　　　　　　　　微调 同上

　　　　　　　　提交 同上

　　　　

　　这里的依赖 提示框是  element ui ， 可以根据自己情况， 自行封装提示框

*--------------------------------------------------------------------------------------------------分割线，  最后附上 我写在公司内部 wiki的说明文档---------------------------------------*

 

1.调用方式

 

 1.1 结构部分

    <map-component mapWidth="100%" mapHeight="200px" v-bind:options="true"></map-component>

     mapWidth/mapHeight 指定地图宽高， 单位可以为 百分比/ px （注意不要加 ；）

    v-bind:options="true"   true 指默认有操作栏，  false 隐藏操作栏

    2.2 JS 部分 

<script>

import mapComponent from '@/components/Map'
...
export default {
  components: {
    mapComponent 
  },
  ...
}

 

附上我写的组件源码地址： https://github.com/IceGogh/vue-components

 

 

　　　　

转载于:https://www.cnblogs.com/qq4535292/p/8446327.html