vue高德地图只显示某一区域的地图，其他地区不显示

程序员文章站 2022-07-02 09:24:15

...

index.html 页面加上<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key"></script>

<!DOCTYPE html>
<html lang="en" data-dpr="1">
  <head>
    <meta charset="utf-8">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title></title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

vue文件

绘制边界获取坐标点  http://www.xswblog.top/WeUI/Cover.html

<template>
  <div id="container"></div>
</template>

<script>
  export default {
    name: 'maps',
    mounted() {
      this.setMap()
    },
    methods: {
      // 绘制边界获取坐标点  http://www.xswblog.top/WeUI/Cover.html
      setMap() {
        /* eslint-disable */
        var map = new AMap.Map('container', {
          zoom: 12, // 初始地图级别
          center: [118.150144, 24.5114], // 初始地图中心点
          pitch: 0,
          viewMode: '3D',
          mapStyle: 'amap://styles/40035571fa9fdd05a26fe1b05f48fdc9' // 设置地图背景图
        })

        var options = {
          areas: [{ // 围栏1
            // visible: false, // 是否可见
            rejectTexture: true, // 是否屏蔽自定义地图的纹理
            path: [[
              [118.13681, 24.517453], [118.13681, 24.517453], [118.137153, 24.518078], [118.138269, 24.499256], [118.149255, 24.498475], [118.159383, 24.498944], [118.160327, 24.506988], [118.156207, 24.523153], [118.148654, 24.520811], [118.144792, 24.517999], [118.137067, 24.517765]
            ]]
          }]
        }

        // 外多边形坐标数组和内多边形坐标数组
        var outer = [
          new AMap.LngLat(-360, 90, true),
          new AMap.LngLat(-360, -90, true),
          new AMap.LngLat(360, -90, true),
          new AMap.LngLat(360, 90, true),
        ]
        var pathArray = [ outer ]
        pathArray.push.apply(pathArray, options.areas[0].path) // options.areas[0].path 外部区域 遮罩
        // pathArray = [ outer ] // 整个地图遮罩
        // pathArray = options.areas[0].path // options.areas[0].path 内部区域 遮罩

        new AMap.Polygon({
          path: pathArray,
          map: map,
          bubble: true,
          fillColor: 'rgba(0,0,0)', // 多边形填充颜色
          fillOpacity: 1, // 多边形填充透明度，默认为0.9
          strokeColor: '#00eeff', // 线条颜色
          strokeWeight: 2,
          strokeOpacity: 0.5, // 轮廓线透明度，默认为0.9
          strokeStyle: 'dashed', // 轮廓线样式，实线:solid，虚线:dashed
          /*勾勒形状轮廓的虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效， 此属性在
            ie9+浏览器有效 取值：
            实线：[0,0,0]
            虚线：[10,10] ，[10,10] 表示10个像素的实线和10个像素的空白（如此反复）组成的虚线
            点画线：[10,2,10]， [10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实
            线和10个像素的空白 （如此反复）组成的虚线*/
          strokeDasharray:[10,2,10]
        })

        // new AMap.Polyline({
        //   path: pathArray,
        //   map: map,
        //   strokeColor: '#3366FF',   // 线颜色
        //   strokeOpacity: 1,         // 线透明度
        //   strokeWeight: 2,          // 线宽
        //   strokeStyle: 'solid',     // 线样式
        //   strokeDasharray: [10, 5], // 补充线样式
        //   geodesic: false            // 绘制大地线
        // })
      }
    }
  }
</script>

<style scoped>
  #container {
    margin: 0;
    height: 100%;
  }
</style>

完成后如下图所示：

参考文章：高德地图-2D地图下区域遮掩(只显示固定区域里的内容)_u010840685的博客-CSDN博客

高德地图api(javascript)只显示某一行政区域的地图，其他周边地区的都不显示_Half of if的博客-CSDN博客

相关标签：高德地图 VUE vue.js 前端

上一篇：一次CMS GC问题排查过程（理解原理+读懂GC日志）(转)

下一篇：【百度地图】删除指定覆盖物