高德地图VUE只显示部分地区遮罩其他地区

最新推荐文章于 2024-02-22 16:12:21 发布

耳东君呐

最新推荐文章于 2024-02-22 16:12:21 发布

阅读量1.5k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/chenchang0419/article/details/127370290

版权

本文介绍了如何在Vue.js项目中利用高德地图API，通过在main.js中引入必要的库，结合Vue组件代码，实现地图上只显示特定地区的功能，其他地区则被遮罩覆盖。通过这种方式，可以专注于展示特定区域的信息。

摘要由CSDN通过智能技术生成

1.在main.js中引入vue，AMap.DistrictSearch为遮罩层必须引入

// 引入高德地图
import VueAMap from 'vue-amap';
// 初始化地图
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: '98acc2caa9e2aa0ee72327ab83002fc6',
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor', "AMap.zoom", "AMap.Geolocation", "AMap.Geocoder", "AMap.Polyline", "AMap.MouseTool", 'AMap.PolylineEditor', 'AMap.DistrictSearch'],
  // 默认高德 sdk 版本为 1.4.4
  v: '1.4.4'
});

2.Vue页面代码

<template>
  <!-- 管网纠错 -->
  <div class="equipment pipeline">
       <!-- tab切换 -->
      <el-tabs type="border-card" @tab-click="handleClick">
        <el-tab-pane label=