一、高德地图
index.html 页面加上<script type="text/javascript" src="/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="/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.htmlsetMap() {/* 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.9strokeColor: '#00eeff', // 线条颜色strokeWeight: 2,strokeOpacity: 0.5, // 轮廓线透明度，默认为0.9strokeStyle: '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="/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>
效果如下图：
参考文章：高德地图-2D地图下区域遮掩(只显示固定区域里的内容)_u010840685的博客-CSDN博客
高德地图api(javascript)只显示某一行政区域的地图，其他周边地区的都不显示_Half of if的博客-CSDN博客
