效果如下

效果说明：点击网页中摸一个按钮的时候对应的标注点放大

实现方法

实现的整体思路是当鼠标点击按钮的时候，首先执行的是去除地图上所有的标注，并且将页面上所有标注的active设置为false（标注的active为true则表示为该标注以放大形式显示），然后将点击按钮所对应的坐标中active设置为true，最后绘制所有点的坐标

1.global.vue用于存放全局变量，这里的数据就直接放在global.vue中

let siteList = {'trip': {'positions': [{// 长沙的经纬度lng: 112.945358,lat: 28.234451,active: false},{// 武汉的经纬度lng: 114.311754,lat: 30.598604,active: false}]},'eat': {}
}

2.javascript函数分别实现去除所有标注点、添加一个标注点、添加多个标注点

// 去除地图上所有的标注removeAllMarker: function (map, markerArr) { //markerArr是用于保存标注点的全局变量，在下面removeOverlay中要用到for (let proprty in this.GLOBAL.siteList) {let site = this.GLOBAL.siteList[proprty]if(site.hasOwnProperty('positions')){for (let i = 0; i < site.positions.length; i++) {site.positions[i].active = false}}}for (let i = 0; i < markerArr.length; i++) {map.removeOverlay(markerArr[i])}},// 在地图上添加一个标注markerFun: function (map, point, iconType) { //iconType是地图标注点的样式let marker = new BMap.Marker(point, {icon: iconType})this.GLOBAL.markerArr.push(marker)map.addOverlay(marker)},//在地图上添加多个标注multMarker: function (obj) {for (let property in obj) {if (obj[property].hasOwnProperty('positions')) {let positions = obj[property].positionsfor (let i = 0; i < positions.length; i++) {// 创建坐标点let points = new BMap.Point(positions[i].lng, positions[i].lat)//判断该标注是否是activeif (positions[i].active) {this.markerFun(this.GLOBAL.map, points, this.GLOBAL.icon1Active)} else {this.markerFun(this.GLOBAL.map, points, this.GLOBAL.icon1)}}}}},

百度地图中点击实现标注放大相关推荐

调取百度地图接口，实现取自己的实时位置，然后可以在百度地图上添加信息标注...
前几天接了一个小项目,就是有关百度地图的,和我的上一篇不一样,上一篇是复制人家的源代码是把东西写死了的,这次的比较有难度,要调取他的接口,用js来实现. 下面我先说一下主要实现的功能,和要实现的页面 ...
java百度地图添加标注_调取百度地图接口，实现取自己的实时位置，然后可以在百度地图上添加信息标注...
前几天接了一个小项目,就是有关百度地图的,和我的上一篇不一样,上一篇是复制人家的源代码是把东西写死了的,这次的比较有难度,要调取他的接口,用js来实现. 下面我先说一下主要实现的功能,和要实现的页面 ...
百度地图删除地图上所有的标注和所有的覆盖物
//百度地图删除地图上所有的标注和所有的覆盖物 NSArray* array = [NSArrayarrayWithArray:_mapView.annotations];[_mapViewremov ...
地图标注源码 php,百度地图设置坐标，标注坐标地理位置
[实例简介]百度地图设置坐标,标注坐标地理位置 [实例截图] [核心代码]// 百度地图API功能 function creat_map(e){ map = new BMap.Map("ma ...
百度地图点击地图类型控件切换普通地图、卫星图、三维图、混合图（卫星图+路网），右下角是缩略图
百度地图点击地图类型控件切换普通地图.卫星图.三维图.混合图(卫星图+路网),右下角是缩略图 <!DOCTYPE html> <html> <head> < ...
让百度地图生成器里的“标注”内容展开--解决方案
这篇文章简单的讲:直接复制文章里的"完整代码", 修改[坐标]和[公司信息]就完事了代码如果你用我写的代码,需要知道下面2个百度地图生成器:http://api.map.ba ...
百度地图点击获取定位信息以及定位的经纬度
1.导入地图的js连接 <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0 ...
百度地图排名优化及标注
百度地图标注,是专门服务于本地商户的一种新型营销模式,你可以在百度地图自主管理您的详情页面,丰富营业信息,让客户全方位了解您并找到你.百度地图标注时可以添加公司名称.地址.电话及400电话.让目标客户 ...

百度地图中点击实现标注放大

效果如下

实现方法

1.global.vue用于存放全局变量，这里的数据就直接放在global.vue中

2.javascript函数分别实现去除所有标注点、添加一个标注点、添加多个标注点

百度地图中点击实现标注放大相关推荐

最新文章

热门文章