vue 腾讯地图使用 行政区划范围

在index.html中引入js

<script charset="utf-8"    src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>

在这里插入图片描述

跨域

安装: npm install vue-jsonp
然后在main.js里导入挂载:
import { VueJsonp } from 'vue-jsonp' //一定要加个花括号{VueJsonp },不然会报错
Vue.use(VueJsonp)

用颜色区分行政区划

<template>
  <div id="container"></div>
</template>
<script>
export default {
  name: "Tendmap",
  data() {
    return {
      modelMsg: false, //显示模态框
      address: "", //输入的地址
      mapList: [], //画图地址
      mapVal: "", //创建的地图,赋值用
      colors: ['#72A1A2','#56564C','#3593C9','#075279','#F37B84','#E27B2D','#9B4401','#B481B3','#C59C42','#EFDDAF'],
      url: "https://apis.map.qq.com/ws/district/v1/getchildren",
      queryParams: {
        id: "420600",
        get_polygon: 2,
        key: "OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77",
        output: "jsonp",
      },
    };
  },
  created() {
    this.initMap(32.018555, 112.155652);
  },
  methods: {
    //初始化地图
    initMap(lat, lng) {
      let that = this;
      //如果地图存在,就销毁,下面会重新创建一个
      if (that.mapVal) {
        that.mapVal.destroy();
      }
      //定义地图中心点坐标
      this.$nextTick(() => {
        var center = new TMap.LatLng(lat, lng);
        //初始化地图
        var map = new TMap.Map("container", {
          center: center, //设置地图中心点坐标
          zoom: 9, //设置地图缩放级别
          pitch: 43.5, //设置俯仰角
          rotation: 45, //设置地图旋转角度
          viewMode: "2D",
        });
        var ps = []; // 边界范围
        var colors = that.colors; //颜色
        that
          .$jsonp(that.url, that.queryParams)
          .then((res) => {
            var resData = res.result[0];
            for (var a = 0; a < resData.length; a++) {
              console.log(resData);
              var resDataPolygon = resData[a].polygon[0];
              var path = [];
              for (var b = 0; b < resDataPolygon.length; b = b + 2) {
                path.push(
                  new TMap.LatLng(resDataPolygon[b + 1], resDataPolygon[b])
                );
              }
              ps.push(path);
            }
           
            //初始化polygon--------
            var polygon = new TMap.MultiPolygon({
              map, // 显示多边形图层的底图
              styles: {
                // 多边形的相关样式
                polygon0: new TMap.PolygonStyle({
                  color: colors[0], // 面填充色
                  showBorder: true, // 是否显示拔起面的边线
                  borderColor: "rgba(255,255,255,255)", // 边线颜色
                  borderWidth: 3, // 边线宽度
                  borderDashArray: [5, 5], // 虚线数组
                }),
                polygon1: new TMap.PolygonStyle({
                  color: colors[1], // 面填充色
                  showBorder: true, // 是否显示拔起面的边线
                  borderColor: "rgba(255,255,255,255)", // 边线颜色
                  borderWidth: 3, // 边线宽度
                  borderDashArray: [5, 5], // 虚线数组
                }),
                polygon2: new TMap.PolygonStyle({
                  color: colors[2], // 面填充色
                  showBorder: true, // 是否显示拔起面的边线
                  borderColor: "rgba(255,255,255,255)", // 边线颜色
                  borderWidth: 3, // 边线宽度
                  borderDashArray: [5, 5], // 虚线数组
                }),
                polygon3: new TMap.PolygonStyle({
                  color: colors[3], // 面填充色
                  showBorder: true, // 是否显示拔起面的边线
                  borderColor: "rgba(255,255,255,255)", // 边线颜色
                  borderWidth: 3, // 边线宽度
                  borderDashArray: [5, 5], // 虚线数组
                }),
                polygon4: new TMap.PolygonStyle({
                  color: colors[4], // 面填充色
                  showBorder: true, // 是否显示拔起面的边线
                  borderColor: "rgba(255,255,255,255)", // 边线颜色
                  borderWidth: 3, // 边线宽度
                  borderDashArray: [5, 5], // 虚线数组
                }),
                polygon5: new TMap.PolygonStyle({
                  color: colors[5], // 面填充色
                  showBorder: true, // 是否显示拔起面的边线
                  borderColor: "rgba(255,255,255,255)", // 边线颜色
                  borderWidth: 3, // 边线宽度
                  borderDashArray: [5, 5], // 虚线数组
                }),
                polygon6: new TMap.PolygonStyle({
                  color: colors[6], // 面填充色
                  showBorder: true, // 是否显示拔起面的边线
                  borderColor: "rgba(255,255,255,255)", // 边线颜色
                  borderWidth: 3, // 边线宽度
                  borderDashArray: [5, 5], // 虚线数组
                }),
                polygon7: new TMap.PolygonStyle({
                  color: colors[7], // 面填充色
                  showBorder: true, // 是否显示拔起面的边线
                  borderColor: "rgba(255,255,255,255)", // 边线颜色
                  borderWidth: 3, // 边线宽度
                  borderDashArray: [5, 5], // 虚线数组
                }),
                polygon8: new TMap.PolygonStyle({
                  color: colors[8], // 面填充色
                  showBorder: true, // 是否显示拔起面的边线
                  borderColor: "rgba(255,255,255,255)", // 边线颜色
                  borderWidth: 3, // 边线宽度
                  borderDashArray: [5, 5], // 虚线数组
                }),
              },
              geometries: [
                {
                  id: "polygon0", // 多边形图形数据的标志信息
                  styleId: "polygon0", // 样式id
                  paths: ps[0], // 多边形的位置信息
                },
                {
                  id: "polygon1", // 多边形图形数据的标志信息
                  styleId: "polygon1", // 样式id
                  paths: ps[1], // 多边形的位置信息
                },
                {
                  id: "polygon2", // 多边形图形数据的标志信息
                  styleId: "polygon2", // 样式id
                  paths: ps[2], // 多边形的位置信息
                },
                {
                  id: "polygon3", // 多边形图形数据的标志信息
                  styleId: "polygon3", // 样式id
                  paths: ps[3], // 多边形的位置信息
                },
                {
                  id: "polygon4", // 多边形图形数据的标志信息
                  styleId: "polygon4", // 样式id
                  paths: ps[4], // 多边形的位置信息
                },
                {
                  id: "polygon5", // 多边形图形数据的标志信息
                  styleId: "polygon5", // 样式id
                  paths: ps[5], // 多边形的位置信息
                },
                {
                  id: "polygon6", // 多边形图形数据的标志信息
                  styleId: "polygon6", // 样式id
                  paths: ps[6], // 多边形的位置信息
                },
                {
                  id: "polygon7", // 多边形图形数据的标志信息
                  styleId: "polygon7", // 样式id
                  paths: ps[7], // 多边形的位置信息
                },
                {
                  id: "polygon8", // 多边形图形数据的标志信息
                  styleId: "polygon8", // 样式id
                  paths: ps[8], // 多边形的位置信息
                },
              ],
            });
            //  ------
          })
          .catch((err) => {
            console.log(err);
          });
      });

    },
  },
};
</script>

<style lang="less">
</style> 

效果图

在这里插入图片描述

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue 高德地图行政区划集合是指在 Vue 框架中使用高德地图 API 来展示和管理行政区划相关的功能和数据。 首先,在使用 Vue 框架中可以通过安装高德地图相关的插件来引入高德地图 API ,可以使用 npm 或者 yarn 来进行安装。然后在 Vue 组件中使用 import 引入地图相关的组件。 其次,可以使用高德地图提供的行政区划 API 来获取各级行政区划的数据。可以根据需要选择完整的行政区划数据还是特定范围行政区划数据。获取到数据后,可以在 Vue 组件中进行处理和展示,例如使用 v-for 指令循环遍历数据,生成相应的列表或者地图区域。 在展示行政区划数据的过程中,可以利用高德地图的相关功能进行交互和样式定制。比如可以使用高德地图提供的 GeoJSON 数据和样式进行地图的绘制,根据行政区划的不同级别设置不同的显示效果。 对于行政区划数据的操作,可以使用高德地图提供的方法进行搜索、过滤和排序等功能。可以根据用户的搜索条件来展示特定的行政区划数据,并将结果反馈给用户。 除此之外,还可以结合 Vue 的双向绑定和事件机制来实现一些业务逻辑。比如根据用户的选择显示相应的行政区划信息,或者在地图上通过点击或者拖动来交互地选择特定的行政区划。 总结来说,Vue 高德地图行政区划集合是通过结合 Vue 框架和高德地图 API 来展示和管理行政区划相关功能和数据的一个解决方案。通过使用相关的插件和方法,可以实现用户界面的展示和交互效果,以及对行政区划数据的操作和处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值