vue地图组件（v-charts百度地图）的使用DEMO@关尔先生

v-charts 封装了一个百度/高德地图的‘壳子’，在 settings 中添加关于图表的配置（key,bmap,amap），在组件上直接设置 series, tooltip 等，便可生成以百度/高德地图为坐标系的 Echarts 图表。

1. 官方文档：v-charts

2. 百度地图 API：jspopularGL | 百度地图 API SDK

3. AK 申请时，选择浏览器类型的 JavaScript API

4. Demo

   <template>
     <div>
       <van-field clickable clearable v-model="currentValue" :placeholder="placeholder">
         <template #left-icon>
           <van-icon
             color="#1989fa"
             :name="mapShow ? 'arrow-up' : 'arrow-down'"
             @click="mapShow = !mapShow"
           >
           </van-icon>
         </template>
         <template #right-icon>
           <van-icon
             color="#1989fa"
             :name="mapShow ? 'arrow-up' : 'location-o'"
             @click="mapShow = !mapShow"
           ></van-icon>
         </template>
         <template #button>
           <van-button size="small" type="primary" @click="localSearch">搜索</van-button>
         </template>
       </van-field>
       <ve-bmap
         v-show="mapShow"
         ref="VeBmapRef"
         :settings="chartSettings"
         :series="chartSeries"
         :tooltip="chartTooltip"
         :after-set-option-once="afterSet"
       >
         <div id="r-result" v-show="mapShow">
           <van-cell
             v-for="(r, i) in address.searchList"
             :key="i"
             :label="r.address"
             @click="searchListSelectFn(r, i)"
           >
             <!-- 使用 title 插槽来自定义标题 -->
             <template #title>
               <van-icon
                 v-show="addressSearchSelectIndex == i"
                 name="location-o"
                 color="red"
               ></van-icon>
               <span class="custom-title">{{ r.title }}</span>
             </template>
           </van-cell>
         </div>
       </ve-bmap>
     </div>
   </template>
   <script>
     import VeBmap from 'v-charts/lib/bmap.common';
     export default {
       components: {
         VeBmap,
       },
       data() {
         this.chartSettings = {
           key: '申请的百度地图key',
           bmap: {
             // 百度地图中心经纬度
             // center: [116.396428,39.917614],
             // 百度地图缩放
             zoom: 14,
             // 是否开启拖拽缩放，可以只设置 'scale' 或者 'move'
             roam: true,
             // 百度地图的自定义样式，见 http://developer.baidu.com/map/jsdevelop-11.htm
             mapStyle: {},
           },
         };
         this.chartTooltip = { show: true };
         return {
           map: null, //百度地图实例对象
           chartSeries: [
             {
               type: 'scatter',
               // 使用百度地图坐标系
               coordinateSystem: 'bmap',
               // 数据格式跟在 geo 坐标系上一样，每一项都是 [经度，纬度，数值大小，其它维度...]
               // data: [[120, 30, 1]],
             },
           ],
           name: '',
           code: '',
           id: '',
           align: 'right',
           width: '100%',
           currentValue: '',
           displayValue: '',
           address: {
             // 经纬坐标
             point: {
               lng: 116.416315,
               lat: 39.944773,
             },
             // 五级街道
             obj: {
               streetNumber: '甲10号',
               street: '中华路',
               district: '东城区',
               city: '北京市',
               province: '北京市',
             },
             // 检索结果
             searchList: [],
           },
           addressSearchSelectIndex: -1,
           zoom: 19,
           markOverlays: [],
           mapShow: false,
         };
       },
       computed: {
         placeholder() {
           if (this.config.placeholder) {
             return this.config.placeholder;
           }
           if (!this.final_editable) {
             return '';
           }
           if (this.required) {
             return '必填';
           }
           return '地图选点 或 手动输入';
         },
       },
       watch: {
         'address.obj': {
           handler(newValue) {
             console.log(newValue);
             let str = '';
             if (newValue) {
               if (newValue.province) {
                 str += newValue.province;
               }
               if (newValue.city) {
                 str += ' ' + newValue.city;
               }
               if (newValue.district) {
                 str += ' ' + newValue.district;
               }
               if (newValue.street) {
                 str += ' ' + newValue.street;
               }
               if (newValue.streetNumber) {
                 str += ' ' + newValue.streetNumber;
               }
             }
             this.currentValue = str;
           },
           deep: true,
         },
         mapShow(newValue) {
           if (newValue) {
             this.$nextTick(e => {
               this.localSearch();
             });
           }
         },
       },
       created() {
         this.width = document.documentElement.clientWidth + 'px';
       },
       methods: {
         getRealValue() {
           return this.currentValue;
         },
         getDisplayValue() {
           return this.address.point.lng + ',' + this.address.point.lat;
         },
         setRealValue(value) {
           this.currentValue = String(value);
         },
         setDisplayValue(value) {
           this.displayValue = value;
           if (typeof value == 'string' && value.indexOf(',') > 0) {
             let ar = value.split(',');
             this.address.point.lng = ar[0] || 0;
             this.address.point.lat = ar[1] || 0;
           }
         },
         afterSet(echarts) {
           let that = this;
           // 获取百度地图实例
           let map = echarts.getModel().getComponent('bmap').getBMap();
           this.map = map;
           // 使用百度地图自带的控件
           map.addControl(new window.BMap.MapTypeControl());
           // 初始化地图,设置中心点坐标和地图级别
           this.map.centerAndZoom(new window.BMap.Point(116.416315, 39.944773), that.zoom);
           //开启鼠标滚轮缩放
           //this.map.enableScrollWheelZoom(true);
           // 初始化定位当前ip的城市
           this.getLocalCity();
           //地图点击事件
           map.addEventListener('click', e => {
             if (!this.final_editable) {
               return;
             }
             this.address.point = e.point;
             console.log(e);
             that.address.searchList = [];
             this.markPoint(e.point);
             this.getAddress();
           });
           // 添加定位控件
           var geoCtrl = new BMap.GeolocationControl({
             showAddressBar: true, //是否显示
             enableAutoLocation: false, //首次是否进行自动定位
             offset: new BMap.Size(0, 25),
             //, locationIcon     : icon //定位的icon图标
           });
           //监听定位成功事件
           geoCtrl.addEventListener('locationSuccess', function (r) {
             console.log(r);
             that.address.point = r.point;
             that.markPoint(r.point, '当前', true);
             that.getAddress();
             that.address.searchList = [];
           });
           //监听定位失败事件
           geoCtrl.addEventListener('locationError', function (e) {
             console.log(e);
           });
           // 将定位控件添加到地图
           map.addControl(geoCtrl);
         },
         // 解析地址
         getAddress() {
           if (!this.final_editable) {
             return;
           }
           this.currentValue = '';
           this.placeholder = '解析地址中';
           let geoc = new window.BMap.Geocoder();
           geoc.getLocation(this.address.point, rs => {
             console.log('getAddress', rs);
             this.address.obj = rs.addressComponents || {};
             this.placeholder = '';
           });
         },
         // 检索
         localSearch() {
           let that = this;
           that.mapShow = true;
           // 百度地图API功能
           var map = this.map;
           map.centerAndZoom(
             new BMap.Point(this.address.point.lng, this.address.point.lat),
             that.zoom,
           );
           var options = {
             onSearchComplete: function (results) {
               if (local.getStatus() == BMAP_STATUS_SUCCESS) {
                 // 判断状态是否正确
                 var s = [];
                 for (var i = 0; i < results.getCurrentNumPois(); i++) {
                   let __address = results.getPoi(i);
                   s.push(__address);
                   that.markPoint(__address.pointN, __address.title, i == 0, i == 0);
                   that.addressSearchSelectIndex = 0;
                 }
                 that.address.searchList = [].concat(s);
                 console.log(that.address.searchList);
               }
             },
           };
           var local = new BMap.LocalSearch(map, options);
           local.search(this.currentValue);
         },
         // 点击检索结果
         searchListSelectFn(r, i) {
           this.addressSearchSelectIndex = i;
           if (this.final_editable) {
             this.currentValue = r.address;
           }
           this.address.point = r.pointN;
           this.toPoint(r.pointN);
         },
         // 用ip定位到城市
         getLocalCity() {
           let that = this;
           // 百度地图API功能
           let map = this.map;
           let BMap = window.BMap;
           var myCity = new BMap.LocalCity();
           myCity.get(result => {
             that.address.point = result.center;
             map.setCenter(result.name);
           });
         },
         clearAllOverlays() {
           // 百度地图API功能
           let map = this.map;
           this.markOverlays.forEach(overlay => {
             map.removeOverlay(overlay);
           });
         },
         markPoint(point, label = '', go = false, doClear = true) {
           // 百度地图API功能
           let map = this.map;
           if (doClear) {
             this.clearAllOverlays();
           }
           var overlay = new BMap.Marker(point);
           if (label) overlay.setLabel(this.getLabel(label));
           map.addOverlay(overlay);
           this.markOverlays.push(overlay);
           if (go) {
             this.toPoint(point);
           }
         },
         /**
          * 画圆
          * point 圆心 经纬度
          * radius 半径，单位/米
          */
         markCircle(point, radius) {
           console.log(point);
           // 百度地图API功能
           let map = this.map;
           //创建圆对象
           let circle = new BMap.Circle(point, radius, {
             strokeColor: 'blue',
             strokeWeight: 1,
             fillColor: '#E2E8F1',
             fillOpacity: 0.6,
           });
           console.log(circle);
           //画到地图上面
           map.addOverlay(circle);
           console.log(circle.getRadius());
         },
         getLabel(content) {
           let fontSize = 12;
           let len = content.length * fontSize;
           //左偏移  右偏移
           var labelStyle = {
             color: '#fff',
             backgroundColor: '#333333',
             border: '0',
             fontSize: fontSize + 'px',
             width: len + 'px',
             opacity: '0.8',
             textAlign: 'center',
             verticalAlign: 'center',
             borderRadius: '2px',
             whiteSpace: 'normal',
             wordWrap: 'break-word',
             padding: '2px 4px',
           };
           //用于设置样式
           var spanA = "<span class='angle'><span>";
           //不同数字长度需要设置不同的样式。
           var offsetSize = new BMap.Size(-len / 2, -25);
           var label = new BMap.Label(content + spanA, {
             offset: offsetSize,
           });
           label.setStyle(labelStyle);
           return label;
         },
         toPoint(point) {
           // 百度地图API功能
           let map = this.map;
           map.panTo(point);
         },
         // 用了地图的控件，此方法没有用了 // 用GPS定位到当前（需要浏览器开启定位）
         getCurrentPosition() {
           let that = this;
           // 百度地图API功能
           let map = this.map;
           let BMap = window.BMap;
           let geolocation = new BMap.Geolocation();
           that.currentValue = '';
           that.placeholder = '定位中';
           geolocation.getCurrentPosition(
             function (r) {
               if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                 that.address.point = r.point;
                 that.markPoint(r.point, '当前', true);
                 that.getAddress();
               } else {
                 that.$toast('failed' + this.getStatus());
                 that.currentValue = '';
               }
             },
             { enableHighAccuracy: true },
           );
         },
       },
     };
   </script>

---

编辑文章✏