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

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><m

Supaopao

5711人浏览 · 2021-10-28 14:39:56

Supaopao · 2021-10-28 14:39:56 发布

一、高德地图

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>

完成后如下图所示：

二、腾讯地图

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>多边形覆盖物参数示例</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
        body,
        button,
        input,
        select,
        textarea {
            font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
        }
        #info {
            width: 603px;
            padding-top: 3px;
            overflow: hidden;
        }
        .btn {
            width: 142px;
        }
    </style>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
    <script>
        var init = function() {
            var center = new qq.maps.LatLng(24.5114, 118.150144);
            var map = new qq.maps.Map(document.getElementById('container'), {
                center: center,
                zoom: 13
            });
            var path0 = [
                new qq.maps.LatLng(-90, 180),
                new qq.maps.LatLng(-90, -180),
                new qq.maps.LatLng(90, -180),
              	new qq.maps.LatLng(90, 180),
            ];
            var path1 = [
                new qq.maps.LatLng(24.517453, 118.13681),
                new qq.maps.LatLng(24.517453, 118.13681),
                new qq.maps.LatLng(24.518078, 118.137153),
                new qq.maps.LatLng(24.499256, 118.138269),
                new qq.maps.LatLng(24.498475, 118.149255),
                new qq.maps.LatLng(24.498944, 118.159383),
                new qq.maps.LatLng(24.506988, 118.160327),
                new qq.maps.LatLng(24.523153, 118.156207),
                new qq.maps.LatLng(24.520811, 118.148654),
                new qq.maps.LatLng(24.517999, 118.144792),
                new qq.maps.LatLng(24.517765, 118.137067),
            ];

            var polygon = new qq.maps.Polygon({

                //多边形是否可点击。
                clickable: true,

                //鼠标在多边形内的光标样式。
                cursor: 'crosshair',

                //多边形是否可编辑。
                editable: true,

                //多边形的填充色，可通过Color对象的alpha属性设置透明度。
                fillColor: '#5f9ea0',
                //fillColor: new qq.maps.Color(0, 0, 0, 0.5),

                //要显示多边形的地图。
                map: map,

                //多边形的路径，以经纬度坐标数组构成。
                path: path1, // 效果如腾讯地图-图一
                //path: [path0, path1], // 效果如腾讯地图-图二

                //多边形的线条颜色，可通过Color对象的alpha属性设置透明度。
                strokeColor: '#000000',

                //多边形的边框样式。实线是solid，虚线是dash。
                strokeDashStyle: 'dash',

                //多边形的边框线宽。
                strokeWeight: 5,

                //多边形是否可见。
                visible: true,

                //多边形的zIndex值。
                zIndex: 1000


            });
        };
    </script>
</head>

<body onload="init()">
    <div style="width:100vw;height:100vh" id="container"></div>

</body>

</html>

效果如下图：