vue地图组件(v-charts百度地图)的使用Demo 笔记

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

关尔先生2020-10-21 11:07:27
1、官方文档:https://v-charts.js.org/#/bmap

2、百度地图API:http://lbsyun.baidu.com/index.php?title=jspopularGL/guide/getkey



3、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"
        />
      </template>
      <template #right-icon>
        <van-icon
          color="#1989fa"
          :name="mapShow?'arrow-up':'location-o'"
          @click="mapShow=!mapShow"
        />
      </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"
    ></ve-bmap>
    <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" />
          <span class="custom-title">{{r.title}}</span>
        </template>
      </van-cell>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
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>

vue地图百度地图vchartsDemo

上一篇:VUE图表插件

下一篇:VUE 前端zxing-js调用摄像头扫码DEMO

本文链接: http://www.nanshanqiao.com/zz_article/59.html

暂无评论