一、高德地图

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.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="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>

效果如下图：

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

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

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

vue 高德地图不同区域显示不同颜色_老司机频繁掉沟里，高德百度腾讯地图导航到底该怎么选？...
导航类app发展至今,基本形成了三分天下的局面:高德.百度.腾讯,然而事实真的是三家平分天下么?三款不同的地图导航软件各有优缺点,至于什么路况选择哪个软件导航似乎更是一门玄学? 很多人想知道高德地图. ...
vue 高德地图不同区域显示不同颜色_没想到高德地图还能这么用，简直是PPT图表神器！...
本文转自:公众号"旁门左道PPT" 作者:邵云蛟提到高德地图,相信咱们每一个人都不会陌生,日常用来导航,也可以用来打车,一次呼叫8种车型,非常方便: 但是,如果你把它仅仅当做一个 ...
高德地图只显示某个地区或省份，并设定显示范围
这里给大家演示只显示北京区域的地图,其他地区不显示. 一.注册高德账号地址:高德开放平台 | 高德地图API 注册好账号后,登录点击进入"我的应用",创建应用,获取key. 二. ...
中高德地图只显示某一城市_Excel实用知识：从零开始，一步步制作属于你自己的三维演示地图...
说明本文是视频内容的图文整理版. 原版视频可以在文末观看三维地图操作详解这是一份原始表格,点击表内任意一个单元格,使用Ctrl和T,将这张表转换为动态表,点击插入,三维地图. 重命名图层为销售 ...
vue 高德地图不同区域显示不同颜色_高德百度哪家强？苹果Carplay第三方分屏功能评测...
几天前,苹果公司正式更新了iOS13.4版本.一个小版本系统更新,却让车主群热闹了起来.在这个版本中,苹果正式开放了Carplay分屏显示模式下对第三方地图的支持. 车主们的热情,化为高德地图和百度地 ...
Web端调用高德地图-自定义地图-只显示中国区域
1. 通过以下链接注册账号密码高德开放平台 | 高德地图API高德开放平台官网https://lbs.amap.com/?ref=https%3A%2F%2Fgeohub.amap.com%2Fmap ...
中高德地图只显示某一城市_干货 | 如何快速制作数据地图？让你的可视化逼格再高一级！...
在数据可视化中,地图可视化是高频应用的一种.我们在一些新闻报道和商业杂志上,会经常看到运用地图来分析展示商业现象,这样的利用地图来反映和分析数据的形式叫数据地图. 数据地图可以最直观的表达出数据之间的 ...
vue高德、谷歌地图动态加载
vue高德.谷歌地图动态加载前言引入地图资源页面使用完整map.js 前言因为我们这个项目,做的是国际化项目,考虑的是,在国内使用高德地图,在国外使用谷歌地图,所以在这里做了个动态引入地图, ...
vue 集成腾讯地图基础api Demo集合
Vue 集成腾讯地图基础api Demo集合(基础地图引入与展示模块,地址逆解析,3D/2D切换 ,位置服务,mark标记) 写作背景 .之前项目使用腾讯地图,感觉还是比较好用的,但是官方的demo大 ...

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

一、高德地图

二、腾讯地图

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

最新文章

热门文章