vue实现地图只显示几个省份

一、开场白

今天给大家说一说百度地图如何只显示一个省份，或者几个省份，再说大点就是那个国家。

二、操作

1. 引入js，vue和jquery自己去下载一个

    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=CIssYEHtXA28ej0NoFeqfnGPZrlu4nqZ"></script><script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>
<script type="text/javascript" src="../../../script/vue/vue.min.js"></script>
<script type="text/javascript" src="../../../script/jquery/jquery-3.5.1.min.js"></script>

2. 写一个地图div，我这边是将vue.js引入了html中

<div id="vue-app"><div id="map1" style="width:100% ； overflow:hidden;" ></div>
</div>//vue的使用var app;app = new Vue({el: '#vue-app1',data: {},mounted: function() {},methods: {}

3. data中定义参数

  data: {districtLoading: 0,blist: [],styles:{width: '100%',height: ''
}

4. 调用map

  mounted: function() {var _seft = this;_seft.map();},

5. 写map（），写在 methods下面

map :function(){var _seft = this;_seft.map1();},map1: function() {var _seft = this;_seft.createMap("map1");},createMap: function(idName) {var _seft = this;// 百度地图API功能var map = new BMap.Map(idName); // 创建Map实例var point = new BMap.Point(106.404, 19.915);map.centerAndZoom(point, 1); // 初始化地图,设置中心点坐标和地图级别map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放map.enableScrollWheelZoom();_seft.getBoundary(map);},getBoundary: function(map) {var _seft = this;_seft.addDistrict("甘肃省",map);_seft.addDistrict("陕西省",map);},/*** 添加行政区划* @param {} districtName 行政区划名* @returns  无返回值*/addDistrict: function (districtName,map) {console.log("<>"+districtName);var _seft = this;//使用计数器来控制加载过程_seft.districtLoading++;var bdary = new BMap.Boundary();bdary.get(districtName, function (rs) {       //获取行政区域var count = rs.boundaries.length; //行政区域的点有多少个console.log(""+JSON.stringify(rs));if (count === 0) {alert('未能获取当前输入行政区域');return;}for (var i = 0; i < count; i++) {_seft.blist.push({ points: rs.boundaries[i], name: districtName });};//加载完成区域点后计数器-1_seft.districtLoading--;if (_seft.districtLoading == 0) {//全加载完成后画端点_seft.drawBoundary(map);}});},/*** 各种鼠标事件绑定*/click: function(evt) {alert(evt.target.name);},mouseover: function(evt) {evt.target.label.setZIndex(99);evt.target.label.setPosition(evt.point);evt.target.label.show();},mousemove: function(evt) {evt.target.label.setPosition(evt.point);},mouseout: function(evt) {evt.target.label.hide();},drawBoundary :function(map) {var _seft = this;//包含所有区域的点数组var pointArray = [];/*画遮蔽层的相关方法*思路: 首先在中国地图最外画一圈，圈住理论上所有的中国领土，然后再将每个闭合区域合并进来，并全部连到西北角。*      这样就做出了一个经过多次西北角的闭合多边形*///定义中国东南西北端点，作为第一层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);//循环添加各闭合区域for (var i = 0; i < _seft.blist.length; i++) {//添加显示用标签层var label = new BMap.Label(_seft.blist[i].name, { offset: new BMap.Size(20, -10) });label.hide();map.addOverlay(label);//添加多边形层并显示var ply = new BMap.Polygon(_seft.blist[i].points, { strokeWeight: 5, strokeColor: "#FF0000", fillOpacity: 0.01, fillColor: " #FFFFFF" }); //建立多边形覆盖物ply.name = _seft.blist[i].name;ply.label = label;ply.addEventListener("click", _seft.click);ply.addEventListener("mouseover", _seft.mouseover);ply.addEventListener("mouseout", _seft.mouseout);ply.addEventListener("mousemove", _seft.mousemove);map.addOverlay(ply);//添加名称标签层var centerlabel = new BMap.Label(_seft.blist[i].name, { offset: new BMap.Size(0, 0) });centerlabel.setPosition(ply.getBounds().getCenter());map.addOverlay(centerlabel);//将点增加到视野范围内var path = ply.getPath();pointArray = pointArray.concat(path);//将闭合区域加到遮蔽层上，每次添加完后要再加一次西北角作为下次添加的起点和最后一次的终点pArray = pArray.concat(path);pArray.push(pArray[0]);}//限定显示区域，需要引用api库var boundply = new BMap.Polygon(pointArray);BMapLib.AreaRestriction.setBounds(map, boundply.getBounds());map.setViewport(pointArray);    //调整视野//添加遮蔽层var plyall = new BMap.Polygon(pArray, { strokeOpacity: 0.0000001, strokeColor: "#000000", strokeWeight: 0.00001, fillColor: "#ffffff", fillOpacity: 0.9 }); //建立多边形覆盖物map.addOverlay(plyall);}

大功告成

不懂得可以加我公众号

vue实现地图只显示几个省份相关推荐

调用百度地图只显示网格的问题
转自:推酷http://www.tuicool.com/articles/biyeY37 关于安卓调用百度地图只显示网格的问题,楼主也曾为此不知所措,曾怀疑是不是百度SDK的bug,在网上也搜了各种答 ...
vue高德/腾讯地图只显示某一区域的地图，其他地区不显示
一.高德地图 index.html 页面加上<script type="text/javascript" src="https://webapi.amap.com ...
高德地图只显示某个地区或省份，并设定显示范围
这里给大家演示只显示北京区域的地图,其他地区不显示. 一.注册高德账号地址:高德开放平台 | 高德地图API 注册好账号后,登录点击进入"我的应用",创建应用,获取key. 二. ...
vue 高德地图多边形_高德地图只显示部分地区遮罩其他地区(vue)
mounted() { this.$nextTick(()=>{ this.initmap(); this.init1("新疆"); }); }, initmap() { / ...
中高德地图只显示某一城市_Excel实用知识：从零开始，一步步制作属于你自己的三维演示地图...
说明本文是视频内容的图文整理版. 原版视频可以在文末观看三维地图操作详解这是一份原始表格,点击表内任意一个单元格,使用Ctrl和T,将这张表转换为动态表,点击插入,三维地图. 重命名图层为销售 ...
解决echarts5中国地图只显示南海问题，及china.js china.json下载
问题: echarts5中国地图,只显示南海说明: echarts3版本后,因为版权问题,echarts不再内置中国地图,也没有中国地图数据,网上找的又很多有问题,或者语焉不详... 1:需要手动引 ...
高德地图只显示部分区域
直接上代码吧高德地图只能到最大到市级,也就是如果只显示一个县或者区的话只有想其他的办法 <div id="mountNode"></div> <sc ...
Vue中文字只显示三行，超过部分收起的实现方法
我们在网站开发过程中经常会遇到需要显示很长的文本内容,但是如果这部分内容并不是用户所关心的,就会占据大量的页面空间,影响用户体验,也影响美观.我们通常的做法是将这段长文本收起,只显示三行或四行,如果用 ...
echarts全国地图只显示南海诸岛问题
在使用百度开源的可视化工具echarts时,用到中国地图,参照官方文档用此段代码 value = [155, 10, 66, 78, 33, 80, 190, 53, 49.6]attr = [&qu ...

vue实现地图只显示几个省份

vue实现地图只显示几个省份相关推荐

最新文章

热门文章

vue实现 地图只显示几个省份

vue实现 地图只显示几个省份相关推荐

最新文章

热门文章

vue实现地图只显示几个省份

vue实现地图只显示几个省份相关推荐