百度地图之添加遮罩层去除百度地图logo

效果图：

步骤：

1，申请百度密钥，步骤不再赘述
2，引入百度地图：pubilc/index.html中引入

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的密钥"></script>

3，添加Map实例，并添加控件，中心坐标为你要显示的区域的中心，画行政区、添加遮罩

<!-- vue 3 引入百度api -->
<template><div id="streetMap"></div>
</template><script>import {onMounted} from "vue";export default {setup() {onMounted(() => {initMap(); // 加载百度地图资源});// 初始化地图function initMap() {var map = new BMap.Map("streetMap", {}); //创建地图实例var point = new BMap.Point(113.90598, 35.3718); //新乡市map.centerAndZoom(point, 10); //设置地图中心坐标和地图大小级别map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放map.setMapType(BMAP_HYBRID_MAP); //混合地图map.setMinZoom(8); //设置地图允许的最小级别map.setMaxZoom(15); //设置地图允许的最大级别var opts = {anchor: BMAP_ANCHOR_BOTTOM_RIGHT,type: BMAP_NAVIGATION_CONTROL_ZOOM,offset: new BMap.Size(1, 1) //放大缩小位置};map.addControl(new BMap.NavigationControl(opts)); //添加可以放大缩小的控件var bdary = new BMap.Boundary();bdary.get("新乡市", function(rs) { //获取行政区var count = rs.boundaries.length; //行政区域的点有多少个  1个if (count === 0) {console.log("未能获取当前输入行政区域");return;}// 给新乡市区之外的区域添加遮罩//定义中国东南西北端点var pNW = {lat: 59.0,lng: 73.0}; // 西北var pNE = {lat: 59.0,lng: 136.0}; //东北var pSE = {lat: 3.0,lng: 136.0}; //东南var pSW = {lat: 3.0,lng: 73.0}; //西南var pArray = [];pArray.push(pNW);pArray.push(pSW);pArray.push(pSE);pArray.push(pNE);pArray.push(pNW); // 向数组中添加一次闭合多边形，并将西北角再加一次作为之后画闭合区域的起点var pointArray = [];for (var i = 0; i < count; i++) {// 画新乡市区var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 3, //定义新乡市区轮廓的粗细fillOpacity: 0.1, //遮罩层透明度fillColor: "", //遮罩层颜色    没有代表不覆盖颜色strokeColor: "#f30e25" // 轮廓颜色});map.addOverlay(ply); //添加覆盖物pointArray = pointArray.concat(ply.getPath());pArray = pArray.concat(ply.getPath()); //将点增加到视野范围内pArray.push(pArray[0]); // 将闭合区域加到遮蔽层上，每次添加完后要再加一次西北角作为下次添加的起点和最后一次的终点}map.setViewport(pointArray); //调整视野var plyall = new BMap.Polygon(pArray, { //新乡市区外的遮罩strokeOpacity: 1,strokeColor: 'none',fillColor: '#033fad', //新乡市区外的遮罩颜色fillOpacity: 0.4, //新乡市区外的遮罩颜色透明度strokeWeight: 0.00001});map.addOverlay(plyall); //建立多边形覆盖物});};return {}},};
</script>
<style scoped>#streetMap {/* // 注意给dom宽高，不然地图不出来 */width: 100%;height: 100vh;}
</style>

4，去除百度LOGO，在pubilc/index.html中写入

<style>/* 清除地图LOGO */.BMap_cpyCtrl {display: none;}.anchorBL {display: none;}
</style>

百度地图之添加遮罩层去除百度地图logo相关推荐

天地图添加遮罩层效果
天地图引入就不写了,这里写引入最基本的地图后,怎样变成遮罩效果 1,思路:外部是蓝色遮罩层,中间镂空为新乡市地图.通过天地图demo修改为自己想要的效果. 2,阿里云下载新乡市四周边界坐标对数据进 ...
js 添加遮罩层（加载中效果）
1. 添加遮罩层 this.mask = document.createElement('div');this.mask.style.width = window.innerWidth + 'px'; ...
html页面添加遮罩层,在浏览器窗口上添加遮罩层的方法
如何在浏览器窗口上添加一个遮罩层背景在web2.0中,页面弹窗是一个很常见的交互方式,这样既可以避免不必要的页面跳转,也可以改进界面的布局和可交互性. 但是,浏览器原生的弹窗函数(alert, c ...
添加遮罩层，实现点击穿透，实现遮罩层按钮点击，遮罩层下层点击事件
给绝对定位的层多加一个样式:" pointer-events:none; " 这样绝对定位层下的元素就可以点击了如果在绝对定位层上存在能够点击的元素,在添加" poin ...
html 图片添加遮罩层,jQuery图片添加渐变遮罩层插件
这是一款jQuery图片添加渐变遮罩层插件.通过该插件,可以为一副背景图片添加指定的渐变遮罩层.该插件支持CSS mix-blend-mode混合模式. 使用方法在页面中引入jquery和jquer ...
html怎么添加遮罩层,如何在浏览器窗口上添加一个遮罩层
背景在web2.0中,页面弹窗是一个很常见的交互方式,这样既可以避免不必要的页面跳转,也可以改进界面的布局和可交互性. 但是,浏览器原生的弹窗函数(alert, confirm, prompt)有着 ...
H5,为页面添加遮罩层，实现类似于点击右上角在浏览器中打开
代码实现,可以直接复制生成html文件演示 <!DOCTYPE html> <html lang="en"> <head><meta ch ...
微信小程序 - 解决自定义添加遮罩层，底部页面仍滚动
前言底部的页面有滚动条,在自定义组件创建遮罩层时,底部页面仍然会滑动解决方法: 为了防止事件冒泡,在遮罩层容器内设置 // 小程序 catchtouchmove="true" ...
android定位附近店铺,高德地图怎么添加店铺位置_高德地图定位怎么设置添加自己家店铺位置_攻略...
高德地图是国内最知名的地图导航软件,基本上每个人的手机上都有这款软件.如今想要方便出行都可以通过高得地图查询位置就可以了,给我们的生活带来了很多的便利.在高德地图上也可以很方便的查询各个地方的店铺,通 ...

百度地图之添加遮罩层去除百度地图logo

效果图：

步骤：

百度地图之添加遮罩层去除百度地图logo相关推荐

最新文章

热门文章

百度地图之 添加遮罩层 去除百度地图logo

效果图：

步骤：

百度地图之 添加遮罩层 去除百度地图logo相关推荐

最新文章

热门文章

百度地图之添加遮罩层去除百度地图logo

百度地图之添加遮罩层去除百度地图logo相关推荐