php地图找房代码,vue-baidu-map简单实现地图找房
1.差不多的地图找房
2.百度地图api的示例demo-----点聚合
3.具体实现
3.1.安装
npm i --save vue-baidu-map
复制代码
3.2全局注册
import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
/* Visit http://lbsyun.baidu.com/apiconsole/key for details about app key. */
ak: 'YOUR_APP_KEY'
})
复制代码
3.3用法示例
import {BmlMarkerClusterer} from 'vue-baidu-map'
export default {
data () {
return {
markers:[]
}
},
components: {
BmlMarkerClusterer
},
mounted(){
// 插入 10 个随机点
for (let i = 0; i < 12; i++) {
let position = {lng: Math.random() * 40 + 85, lat: Math.random() * 30 + 21}
this.markers.push(position)
}
},
methods:{
handler({BMap, map}){},
}
}
复制代码
BmMarker:具体的每个坐标点
BmlMarkerClusterer:能够聚合它包含的所有 BmMarker 组件,根据设置的gridSize(网格大小,相关具体属性可以去百度地图点聚合的api查看)属性结合地图的缩放层级(zoom)动态实现点聚合
结合实际需求进行改造
1.按区域分组聚合
将坐标点分组,需要知道每组的中心点坐标方便为聚合点添加标签,遍历生成 BmlMarkerClusterer,这样可以控制每个聚合点的 聚合数量和单独设置每个区域的聚合点的样式
2.自定义聚合点或具体坐标点的样式和内容
具体字段说明并没有,比较坑爹,开发文档里不太好找,在百度地图开源库里才能找到
注意url必须使用绝对路径或者放在static里的图片路径,否则设置无效,assets 里面的图片是会经过 webpack 的 loader 处理的,而 static 里面的图片是被直接复制到 dist/static 下面的。
自定义内容需使用BmLabel标签,其content的内容支持HTML,不过需要知道聚合时的地图缩放层级(zoom)控制隐藏显示
v-if="zoom == 13"
:massClear='true'
@click="cluster({lng: city.markers[0].lng, lat: city.markers[0].lat})"
class="bmap"
:content="city.name+city.num+'套'"
:position="{lng: city.lng, lat: city.lat}"
:labelStyle="labelcss2"
:offset="{width: -40, height: 8}"
/>
点击标签实现同点击聚合点的响应事件,只需增大地图容器的层级同时设置点击点的坐标为地图容器的中心点
3.一级分组点聚合
设置聚合的最大缩放级别(maxZoom)==地图容器的缩放等级(min-zoom)
4.多层级分组点聚合
每次点击结合地图缩放层级和动态设置分组数据即可
总结与优化
每次都是将所有数据标注在地图上,对于数据较少和分级不多的的情况下还是比较简单和友好的,如果需要一级以上的更多数据的聚合则可以放弃点聚合,看似点聚合,实则是多点位标记
根据自己需要展示几层聚合,设置好地图缩放的“级别段”
先获取定位点,添加地图展示,并设置最大、最小缩放级别,并根据对应层级的数据添加标记点
地图拖动或缩放时时监听地图缩放等级,以及地图中心点,去请求对应层级的数据,为了避免数据多余影响效率和性能,每次请求只请求可视区域内的数据。清除上一层级的标记点,添加新的标记点
聚合功能已经可以展示出来了,点击标签只需要增加地图层次级别和添加额外的自定义事件就可以了
结语
本人第一篇博客,欢迎点赞与指正。
php地图找房代码,vue-baidu-map简单实现地图找房相关推荐
- Vue Baidu Map 实现Vue版本地图轨迹回放(App端)
Vue Baidu Map 地图轨迹回放 Vue Baidu Map 简介 Vue Baidu Map 安装 1.NPM 2.CDN Vue Baidu Map 引用 BmlLushu 引用 BmlL ...
- vue baidu map之获取选中点的经纬度
需求:在vue项目中通过点击按钮,弹出百度地图的弹框,用户选择地图上的点或者通过搜索关键字选点,点击确认 关闭弹窗 得到经纬度 效果: vue baidu map api链接 : https://da ...
- C语言 输入一行字符,统计其中有多少个单词 和 有三个字符串(网上找的代码有瑕疵已解决),找出其中最大者的完整代码及分析过程
问题1:输入一行字符,统计其中有多少个单词 思考这一类问题的常用解决方法是什么?是这种形式的: ------>最终完整的代码:<------ #include <stdio.h> ...
- Vue中用 Vue Baidu Map 绘制地图
1.先贴上官网案例 https://dafrok.github.io/vue-baidu-map/#/zh/guide/painting 官网的东西,没有百度地图开放平台上面的东西齐全,考虑到vue ...
- Vue中使用百度地图Vue Baidu Map(vue-baidu-map)
最近负责的一个vue项目中需要调用百度地图api做标记打点的需求,记录一下: vue-baidu-map 官方地址 一.插件的安装 1.npm 安装 $ npm install vue-baidu-m ...
- Android 百度地图开发之一(Hello BaiDu Map)
之前也接触过百度地图的开发,但那是在网上找的案例或代码,而且是比较老的版本.打算重新学习一下百度地图的开发. 本次使用的百度地图的版本是 Android SDK v3.0.0 本篇文章主要讲述百度地图 ...
- Vue Baidu Map组件: 点、线、多边形、圆形、撤销、返回
话不多说,直接上代码: 参考官网代码改编:https://dafrok.github.io/vue-baidu-map/#/zh/guide/painting 效果图 index.vue <te ...
- vue框架中使用高德地图自定义icon问题
** vue框架中使用高德地图自定义icon问题 ** vue框架中使用高德地图自定义icon,在编译时,因为图片会有封装问题等,但是在高德地图中没有转化对应的路径,在最后结果中会出现找不到图标的问题 ...
- SpringBoot+Vue+OpenLayers6完成前后端分离的“疫情地图”实战项目(一、地图数据处理及代码托管)
前面我们介绍了Vue+webpack+openlayer的地图基础知识,从这一章开始,我们将正式开始我们的基于SpringBoot+Vue+OpenLayers的实战项目---疫情地图! 一.疫情地图 ...
- vue 引入echarts画中国地图 Map china not exists
现象:在vue里用echarts画地图时报错:Map china not exists. 只出现了南海诸岛部分 原因:没引入地图数据 解决: import 'echarts/map/js/china. ...
最新文章
- SSH与VMware的Linux虚拟机链接
- 使用littleTools简化docker/kubectl的命令
- 帮你理清 SpringBoot 与 SpringMVC 的关系
- 千万数据去重_mysql去重,3亿多数据量
- Bootstrap全局css样式_代码
- [洛谷P2073] 送花
- WMI 获得已安装应用程序列表
- AI连围棋都可以大胜,何况游戏
- 微博这样的软件怎么测试,新浪微博都盘上了,这个测试玩嗨了!
- Proe3.0-5.0安装说明
- 场内场外交易成本_场内基金交易费用更低,但为什么我们都建议大家购买场外基金?...
- 如何快速求一个数的所有因子数 c/c++
- 付费资源不能上传了?!
- android高仿微信表情输入与键盘输入详解-解决跳闪与表情切换问题
- 面向对象的讨论-2022年5月4日
- 我用“电驴”抓肉鸡(转)
- 打印信息无法连接服务器,打印机无法连接服务器
- Linux系统下adb驱动安装步骤 及 问题总结
- 2021-12-5 《聪明的投资者》学习笔记
- VOLO: Vision Outlooker for Visual Recognition
热门文章
- 【下载】快速通过Python笔试?学大家一样先把LeetCode答案私藏了
- 近场动力学python_科学网—近动力学最新上线的文章快报:2018年7月 - 韩非的博文...
- 几种常见的JS混淆工具比较。
- AutoCAD LT 2020 for Mac在升级了MacOS 11后打不开了怎么处理?那么教程来了哦
- 大学机器人类公选课(ROS机器人高效编程)申请表、大纲、部分教案、进度表等材料分享
- Java JDBC学习
- 玩客云pc端_玩客云下载-玩客云电脑版下载-华军软件园
- 新概念模拟电路_第一册_晶体管_读书笔记
- C# Winfrom MQTT 客户端与服务器【代码】
- Spring boot mqtt客户端