效果如下:

     var blist = []
var districtLoading = var map = new window.BMap.Map("container",{ minZoom:,maxZoom: });// 创建地图实例
var point = new window.BMap.Point(89.48,31.57);
map.centerAndZoom(point,7.4);//设置中心点坐标和地图级别
map.enableScrollWheelZoom(); // 允许滚轮缩放
this.zoom = map.getZoom();
this.map = map;
this.getBoundary(); /*
=====获取行政区域边界=====
*/
getBoundary() {
this.addDistrict("西藏");
},
/*
=====添加行政区域=====
*/
addDistrict(districtName) {
let that = this;
//使用计数器来控制加载过程
districtLoading++;
var bdary = new BMap.Boundary();
bdary.get(districtName, function (rs) { //获取行政区域
var count = rs.boundaries.length; //行政区域的点有多少个
for (var i = ; i < count; i++) {
blist.push({ points: rs.boundaries[i], name: districtName });
};
//加载完成区域点后计数器-1
districtLoading--;
if (districtLoading == ) {
//全加载完成后画端点
that.drawBoundary();
}
});
},
/*
=====点击行政区域事件=====
*/
click(evt) {
alert(evt.target.name);
},
/*
=====绘制边界=====
*/
drawBoundary() {
let that = this;
//包含所有区域的点数组
var pointArray = [];
//循环添加各闭合区域
for (var i = ; i < blist.length; i++) {
//添加多边形层并显示
var ply = new BMap.Polygon(blist[i].points, {
strokeWeight: , //边框宽度
trokeColor: "#FFA96E", //边框颜色
fillColor: " #DDE4F070" //填充颜色
}); //建立多边形覆盖物
ply.name = blist[i].name;
// ply.addEventListener("click", that.click);
this.map.addOverlay(ply); //将点增加到视野范围内
var path = ply.getPath();
pointArray = pointArray.concat(path);
} //限定显示区域(只显示特定区域,鼠标拖动松开后自动回到显示范围内),需要引用api库
// var boundply = new BMap.Polygon(pointArray);
// BMapLib.AreaRestriction.setBounds(map, boundply.getBounds());
this.map.setViewport(pointArray); //调整视野
},

vue项目,百度地图api高亮选取区域,高亮某个地区,行政区域等的更多相关文章

  1. 百度地图API实现多区域标记

    最近遇到一个业务就是需要需要在地图上标记多个区域.一般餐饮业做外卖的,配送范围一般是多区域的,那么在地图上标记配送范围的时候就需要能标记多个区域.长话短说,最初的实现原型的截图如下:

  2. vue中百度地图API的调用

    1.使用百度地图api需要使用jsonp,来获取百度api的返回,因为vue不自带jsonp所以需要下载 安装jsonp npm i vue-jsonp -S 引入jsop import Vue fr ...

  3. 百度地图api将可视区域定位到当前所在位置

    1.前言 开头不说点什么,总是有点不习惯.还是说点什么吧,关于百度地图,我用的次数还是比较多的,没办法,需求呀.好吧,在用百度地图的时候,确实有过很多需求,不过好在百度地图很强大,每次需求在探索后都能 ...

  4. vue结合百度地图Api实现周边配置查询及根据筛选结果显示对应坐标详情

    在我们平常写房地产相关项目的时候经常会用到百度地图,因为这一块客户会考虑到房源周围的配套或者地铁线路所以在这类项目中就不可以避免的会用到百度地图,当然这只是其中一种,其他地图工具也可以,因为我这个项目 ...

  5. vue引入百度地图api组件封装(根据地址定位)

    Map.vue <template> <div class="Map" :style="{ height: this.height+'px', widt ...

  6. vue项目使用百度地图API获取经纬度

    一.首先在百度api注册获得ak密钥 二.进行引入 (1).第一种方式: 直接在vue中index.html中用script标签引入. //你的ak密钥需要替换真实的你的ak码 <script ...

  7. Windows Store Javascript项目使用高德地图、谷歌地图、百度地图API

    原文 Windows Store Javascript项目使用高德地图.谷歌地图.百度地图API 在Win8 Store 项目中可以使用的地图主要有微软的Bing Map,目前高德地图sdk也支持Wi ...

  8. 【百度地图API】自行获取区域经纬度的工具

    原文:[百度地图API]自行获取区域经纬度的工具 摘要:上一章教大家如何建立自己的行政区域地图.这次为大家提供一个,可视化选择区域,并且能自动生成经纬度代码的工具.工具的源代码完全公开,并且做了详尽的 ...

  9. 【百度地图API】如何利用自己的数据制作社交地图?只显示可视区域内的标注

    原文:[百度地图API]如何利用自己的数据制作社交地图?只显示可视区域内的标注 摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法.那就是,只显示可视区域内 ...

  10. VUE之使用百度地图API

    利用vue创建点餐系统,在点餐系统中需要知道商家地址信息,这时就需要借用百度地图API. 步骤一:申请百度地图密钥: 步骤二:在index.html中添加百度地图JavaScript API接口: & ...

随机推荐

  1. 免费ip共享库

    分享一个免费的ip地址库查询,同时支持ipv4和ipv6查询,提供api接口.官网地址:https://www.calpha.club/ 希望可以帮助运维朋友们. python 2.7实例# -*- ...

  2. *** 没有规则可以创建目标“test”。 停止。

    在编译Linux模块时出现这个问题,在仔细检查了Makefile没有错误后,重名了了该源程序和Makefile所在文件夹的名字,与源程序名字一致,然后问题就消失了!它们的关联体现在哪啊!?

  3. PAT A1009 Product of Polynomials(25)

    课本AC代码 #include <cstdio> struct Poly { int exp;//指数 double cof; } poly[1001];//第一个多项式 double a ...

  4. PHPRedis教程之geo

    前言 支持 GEO 系列命令的 Redis 版本从 3.2.0 起开始才可以使用,所以之前版本就不要想了. 函数列表 geoadd - 将指定的地理空间项(纬度,经度,名称)添加到指定的键, 数据作为 ...

  5. Linxu-mysql5.7源码安装

    Mysql5.7 Linux安装教程 1系统约定安装文件下载目录:/data/softwareMysql目录安装位置:/usr/local/mysql数据库保存位置:/data/mysql日志保存位置 ...

  6. 20-Perl 正则表达式

    1.Perl 正则表达式正则表达式(regular expression)描述了一种字符串匹配的模式,可以用来检查一个串是否含有某种子串.将匹配的子串做替换或者从某个串中取出符合某个条件的子串等.Pe ...

  7. JS实现带省略号的长分页显示

    // 刷新|生成分页信息 function refreshPageInfo(data, pageIndex) { var pageSize = data.pageCount pagingInfo.ht ...

  8. 如何配置数据库镜像<一>

    一.简介 “数据库镜像”是Sql Server 2005推出的一个主要用于提高数据库可用率的软件解决方案.镜像是基于每个数据库执行的,仅适用于使用完整恢复模式的数据库.简单恢复模式和大容量日志恢复模式 ...

  9. C# 添加log4net日志

    一.添加log4net的Nuget包 二.在Web.config或者App.config文件中添加log4net配置 代码: <log4net> <!-- OFF, FATAL, E ...

  10. vue中使用qrcode,遇到两次渲染的问题

    1.安装 qrcodejs2: npm install qrcodejs2 --save 2.页面中引入: import QRCode from "qrcodejs2";   co ...