uniapp百度地图聚合

// loadBMap.js  ak 百度key
export default function loadBMap(ak) {return new Promise((resolve, reject) => {//聚合API依赖基础库,因此先加载基础库再加载聚合APIasyncLoadBaiduJs(ak).then(() => {// 调用加载第三方组件js公共方法加载其他资源库// 加载聚合API// MarkerClusterer_min.js依赖TextIconOverlay.js。因此先加载TextIconOverlay.jsasyncLoadJs('http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay.js').then(() => {asyncLoadJs('http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js').then(() => {asyncLoadJs('http://api.map.baidu.com/library/InfoBox/1.2/src/InfoBox_min.js').then(() => {resolve()return true}).catch(err => {reject(err)})}).catch(err => {reject(err)})}).catch(err => {reject(err)})}).catch(err => {reject(err)})})
}
// 加载百度地图基础组件js
export function asyncLoadBaiduJs(ak) {return new Promise((resolve, reject) => {if (typeof BMap !== 'undefined') {resolve(BMap)return true}window.onBMapCallback = function() {resolve(BMap)}let script = document.createElement('script')script.type = 'text/javascript'script.src = 'http://api.map.baidu.com/api?v=3.0&ak=' + ak + '&s=1&callback=onBMapCallback'script.onerror = rejectdocument.head.appendChild(script)})
}
// 加载第三方组件js公共方法
export function asyncLoadJs(url) {return new Promise((resolve, reject) => {let script = document.createElement('script')script.type = 'text/javascript'script.src = urldocument.head.appendChild(script)script.onload = () => {resolve()}script.onerror = reject})
}

// import loadBMap from '@/utils/loadBMap.js'
initMapc() {let that = thisloadBMap('百度key').then(() => {map = new BMap.Map('mapContainer')const centerPoint = new BMap.Point(that.longitude, that.latitude)map.centerAndZoom(centerPoint, that.zoom)// 添加缩放控件map.addControl(new BMap.NavigationControl());markerArr = [];that.parkList.forEach(item => {let point = new BMap.Point(item.longitude, item.latitude);let marker = new BMap.Marker(point);marker.id = item.id;marker.title = item.name;marker.address = item.address// 添加标签const opts = {position: point, // 指定文本标注所在的地理位置offset: new BMap.Size(8, -30) // 设置文本偏移量};// 创建文本标注对象let c ="<div style='background: #fff;padding: 6px 8px;border-radius: 4px'>" +"<div style='display: flex;align-items: center;'> <span style='color: #333;font-size:14px'>" +item.name +"    " +"</span>" +"</div>" +"<div style='font-size: 12px;color: rgb(153, 153, 153);margin-top:2px;'>" +item.address + "</div>" + "</div>"const label = new BMap.Label(c, opts);// 自定义文本标注样式label.setStyle({color: "#000",fontSize: "12px",fontFamily: "微软雅黑",border: '0',padding: '0',// ointerEvents: 'none' // 设置文本标签不接受鼠标事件});// 将标签添加到地图中// map.addOverlay(label);// 添加信息窗口marker.addEventListener('click', function() {// alert(`Marker ID: ${marker.id}, Title: ${marker.title}`);that.navigateTo('/pages/shop/packageList?id=' + marker.id + "&name=" +marker.title)});label.addEventListener("click", function(e) {// alert("您点击了文本标签");// console.log(e)// console.log(marker.id)that.navigateTo('/pages/shop/packageList?id=' + marker.id + "&name=" +marker.title)});label.setZIndex(999); // 设置zIndex属性marker.setLabel(label);markerArr.push(marker);map.addOverlay(marker);})var markerClusterer = new BMapLib.MarkerClusterer(map, {markers: markerArr})// 监听地图移动、放大缩小事件map.addEventListener("movestart", function(){markerClusterer.getMarkers().forEach(marker => {// console.log(marker.id)let c ="<div style='background: #fff;padding: 6px 8px;border-radius: 4px'>" +"<div style='display: flex;align-items: center;'> <span style='color: #333;font-size:14px'>" +marker.title +"    " +"</span>" +"</div>" +"<div style='font-size: 12px;color: rgb(153, 153, 153);margin-top:2px;'>" +marker.address + "</div>" + "</div>"const label = new BMap.Label(c, {position: marker.getPosition(),offset: new BMap.Size(20, -10)});label.setStyle({color: "#000",fontSize: "12px",fontFamily: "微软雅黑",border: '0',padding: '0',});marker.setLabel(label);map.addOverlay(marker);label.addEventListener("click", function(e) {// alert("您点击了文本标签");// console.log(e)// console.log(marker.id)that.navigateTo('/pages/shop/packageList?id=' + marker.id +"&name=" +marker.title)});})});map.addEventListener("moveend", function(){markerClusterer.getMarkers().forEach(marker => {// console.log(marker.id)let c ="<div style='background: #fff;padding: 6px 8px;border-radius: 4px'>" +"<div style='display: flex;align-items: center;'> <span style='color: #333;font-size:14px'>" +marker.title +"    " +"</span>" +"</div>" +"<div style='font-size: 12px;color: rgb(153, 153, 153);margin-top:2px;'>" +marker.address + "</div>" + "</div>"// // 添加文本标签到每个 marker 上// const label = new BMap.Label(c, {// 	position: marker.getPosition(),// 	offset: new BMap.Size(20, -10)// });const label = new BMap.Label(c, {position: marker.getPosition(),offset: new BMap.Size(20, -10)});label.setStyle({color: "#000",fontSize: "12px",fontFamily: "微软雅黑",border: '0',padding: '0',});marker.setLabel(label);map.addOverlay(marker);label.addEventListener("click", function(e) {// alert("您点击了文本标签");// console.log(e)// console.log(marker.id)that.navigateTo('/pages/shop/packageList?id=' + marker.id +"&name=" +marker.title)});})});map.addEventListener("zoomstart", function(){markerClusterer.getMarkers().forEach(marker => {// console.log(marker.id)let c ="<div style='background: #fff;padding: 6px 8px;border-radius: 4px'>" +"<div style='display: flex;align-items: center;'> <span style='color: #333;font-size:14px'>" +marker.title +"    " +"</span>" +"</div>" +"<div style='font-size: 12px;color: rgb(153, 153, 153);margin-top:2px;'>" +marker.address + "</div>" + "</div>"// // 添加文本标签到每个 marker 上// const label = new BMap.Label(c, {// 	position: marker.getPosition(),// 	offset: new BMap.Size(20, -10)// });const label = new BMap.Label(c, {position: marker.getPosition(),offset: new BMap.Size(20, -10)});label.setStyle({color: "#000",fontSize: "12px",fontFamily: "微软雅黑",border: '0',padding: '0',});marker.setLabel(label);map.addOverlay(marker);label.addEventListener("click", function(e) {// alert("您点击了文本标签");// console.log(e)// console.log(marker.id)that.navigateTo('/pages/shop/packageList?id=' + marker.id +"&name=" +marker.title)});})});map.addEventListener("zoomend", function(){markerClusterer.getMarkers().forEach(marker => {// console.log(marker.id)let c ="<div style='background: #fff;padding: 6px 8px;border-radius: 4px'>" +"<div style='display: flex;align-items: center;'> <span style='color: #333;font-size:14px'>" +marker.title +"    " +"</span>" +"</div>" +"<div style='font-size: 12px;color: rgb(153, 153, 153);margin-top:2px;'>" +marker.address + "</div>" + "</div>"// // 添加文本标签到每个 marker 上// const label = new BMap.Label(c, {// 	position: marker.getPosition(),// 	offset: new BMap.Size(20, -10)// });const label = new BMap.Label(c, {position: marker.getPosition(),offset: new BMap.Size(20, -10)});label.setStyle({color: "#000",fontSize: "12px",fontFamily: "微软雅黑",border: '0',padding: '0',});marker.setLabel(label);map.addOverlay(marker);label.addEventListener("click", function(e) {// alert("您点击了文本标签");// console.log(e)// console.log(marker.id)that.navigateTo('/pages/shop/packageList?id=' + marker.id +"&name=" +marker.title)});})});})},

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/9390.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Oracle数据库如何插入平方(²)立方(³)字符

Oracle数据库如何插入平方(²)立方(³)字符

第一步&#xff1a;创建数据表&#xff0c;字段一定要是NVARCHAR2类型的 第二步&#xff0c;插入数据用 unistr(1\00b3) 形式的写法 00b3 代表m&#xff0c;00b2代表㎡ SELECT * FROM TESTABC; UPDATE TESTABC set NAME1unistr(1\00b3); UPDATE TESTABC set NAME2unistr(2\00b2…
阅读更多...
微信小程序里的地理导航：百度地图API与路径规划实战

微信小程序里的地理导航：百度地图API与路径规划实战

微信小程序里的地理导航&#xff1a;百度地图API与路径规划实战 引言&#xff1a;百度地图API与微信小程序的融合准备工作&#xff1a;申请密钥与引入SDK1. 注册百度地图开放平台账号2. 引入百度地图SDK 展示地图&#xff1a;初次接触百度地图组件地图组件基础定位当前用户位置…
阅读更多...
【OceanBase诊断调优】—— checksum error ret=-4103 问题排查

【OceanBase诊断调优】—— checksum error ret=-4103 问题排查

适用版本 OceanBase 数据库所有版本。 什么是 checksum data checksum&#xff1a;一个 SSTable 中所有宏块内存二进制计算出来的 checksum 值。反映了宏块中的数据和数据分布情况。如果宏块中数据一致但是数据分布不一致&#xff0c;计算出来的 checksum 也不相等。 column…
阅读更多...
【LLM多模态】MiniGPT4模型结构和训练流程

【LLM多模态】MiniGPT4模型结构和训练流程

note 图生文应用场景&#xff1a;比如电商领域根据产品图像生成产品描述、娱乐领域中根据电影海报生成电影介绍等MiniGPT-4将预训练的大语言模型和视觉编码器参数同时冻结&#xff0c;只需要单独训练线性投影层&#xff0c;使视觉特征和语言模型对齐。MiniGPT4的视觉编码器&am…
阅读更多...
centos 8.5 Node v20.12.2 npm 安装及环境配置 配置淘宝最新镜像地址

centos 8.5 Node v20.12.2 npm 安装及环境配置 配置淘宝最新镜像地址

1下载&#xff1a;Node.js — Download Node.js 2文件上传到服务器 rootlocalhost software]# tar xvf node-v20.12.2-linux-x64.tar.xz [rootlocalhost software]# mv node-v20.12.2-linux-x64/ /usr/local/node [rootlocalhost software]# vim /etc/profile export PA…
阅读更多...
VSCode：设置搜索时的排除目录

VSCode：设置搜索时的排除目录

VSCode搜索时默认会搜索目录下所有文件 $ tree . ├── a.c ├── m.c └── x └── b.c //a.c #include <stdio.h> #include <string.h>int main() {char s[] "hello\n";fprintf(stdout, s, strlen(s));return 0; } //m.c #include <stdio…
阅读更多...
【LSTM】LSTM网络及参数学习笔记

【LSTM】LSTM网络及参数学习笔记

图1 LSTM模型结构可视化 [6]. 图2 LSTM cell结构说明 图3 LSTM cell和num_units说明 [4]. 图4 LSTM的网络结构 1. LSTM 是对一个LSTM层的抽象&#xff0c;可以看成是由多个LSTM cell组成&#xff0c;是包含时间步的一个网络 2. LSTM cell 图2是LSTM在时间步上的结构&#xf…
阅读更多...
【硬件开发】原型设计对于成功产品开发重要性及常见阶段

【硬件开发】原型设计对于成功产品开发重要性及常见阶段

电子产品的设计与开发始于原型制作阶段。这些原型虽可能与最终产品极为相似&#xff0c;但总带有实验性质&#xff0c;因为电子原型的制作过程包括对新概念、新思想及新解决方案的测试。虽然存在出错的风险&#xff0c;跳过这一阶段可能会导致不必要的开支。不擅长电子硬件设计…
阅读更多...
PELCO-D相机云台控制协议

PELCO-D相机云台控制协议

pelco pelco D云台控制协议 参考手册 PELCO-D协议手册PELCO-D命令列表 PELCO-D格式 Pelco-D是由7个十六进制字节组成&#xff08;除非另有说明&#xff0c;本页中使用的所有字节数据均为十六进制格式&#xff09;。 Byte1Byte2Byte3Byte4Byte5Byte6Byte7Sync同步字节控制…
阅读更多...
packageKit学习（一）

packageKit学习（一）

最近在学习packagekit&#xff0c;本系列主要讲述&#xff0c;如何使用packageKit接口。 1. 导入依赖 在使用packageKit 之前需要导入一些依赖和安装一些包&#xff0c;不然会报错&#xff0c;以下以报错信息讲解&#xff1a; cmakelist demo/updatesystemdemo/mainwindow.cpp…
阅读更多...
element-ui 图片（图片压缩）与文件上传设置【添加请求头信息】

element-ui 图片（图片压缩）与文件上传设置【添加请求头信息】

1.图片上传 <template><div><el-upload class"avatar-uploader" :action"upload /Api/upload" :show-file-list"false" :on-success"upSuccess":before-upload"beforeAvatarUpload" :on-exceed"handl…
阅读更多...
2024年想要开一家抖音小店，需要多少钱？一篇详解！

2024年想要开一家抖音小店，需要多少钱？一篇详解！

大家好&#xff0c;我是电商糖果 随着抖音卖货的持续火爆&#xff0c;抖音小店也成了电商行业讨论度最大的项目之一。 不少朋友都想知道&#xff0c;如果今年开抖音小店大概需要多少钱。 糖果做小店的时间也比较长&#xff0c;也经营了多家小店。 对于开一家抖音小店需要多…
阅读更多...
MADbench2

MADbench2

MADbench2 MADbench2是一款用于测试大规模并行架构的I/O、通信和计算子系统在真实科学应用压力下的综合性能的工具。 MADbench2 基于 MADspec 代码&#xff0c;该代码根据天空的噪声像素化图及其像素-像素噪声相关矩阵计算宇宙微波背景辐射的最大似然角功率谱。MADbench2 保留…
阅读更多...
多规格产品应该如何设置呢？

多规格产品应该如何设置呢？

今天一用户从供应商手中拿到产品价目表&#xff0c;但是设置起来蒙圈了&#xff0c;接下来我们就一起设置一下吧&#xff5e; 一、产品价格表 我们通过供应商手中拿到产品价目表是这个样子的&#xff1a; 我们可以看到此产品的销售客价根据不同地区导致的价格不同&#xff0…
阅读更多...
ABAP小技巧汇总（自用）

ABAP小技巧汇总（自用）

1.TIMESTAMP搜索帮助 PARAMETERS:p_begin TYPE ty_screen-date_begiu MATCHCODE OBJECT cpe_timestamp, "开始时间戳p_end TYPE ty_screen-date_end MATCHCODE OBJECT cpe_timestamp. "结束时间戳 效果&#xff1a;
阅读更多...
Git笔记-常用指令

Git笔记-常用指令

Git笔记-常用指令 一、概述二、仓库管理二、缓存区操作1. 添加文件到缓存区2. 取消缓存文件3. 忽略列表 三、日志状态信息四、分支操作五、六、 一、概述 这里记录一些git常用的指令。 二、仓库管理 # 本地仓库初始化 git init# 克隆仓库 git clone git_url # git clone ht…
阅读更多...
深入剖析Java的“幽灵之手“：NullPointerException的原因、解决与创意思考

深入剖析Java的“幽灵之手“：NullPointerException的原因、解决与创意思考

1. 原因分析 java.lang.NullPointerException&#xff08;简称NPE&#xff09;是Java程序员在编程过程中经常会遇到的“幽灵之手”&#xff0c;它在毫无预警的情况下出现&#xff0c;让程序崩溃。NPE的根源在于尝试访问或修改一个null对象的成员或方法。以下是NPE出现的几个常…
阅读更多...
怎么选择适合Selenium使用的网络代理

怎么选择适合Selenium使用的网络代理

Selenium可以让你使用所有主流浏览器&#xff0c;访问你想测试的任何网站或服务。这种多功能性使 Selenium 不仅在测试方面不可或缺。例如&#xff0c;你可以将 Selenium 与 Python 结合使用&#xff0c;对网站进行搜刮。当然&#xff0c;为了不被拦截&#xff0c;你需要一个代…
阅读更多...
2024数维杯数学建模竞赛B题完整思路代码和论文分析

2024数维杯数学建模竞赛B题完整思路代码和论文分析

2024数维杯数学建模B题完整代码和成品论文已更新&#xff0c;获取↓↓↓↓↓ https://www.yuque.com/u42168770/qv6z0d/bgic2nbxs2h41pvt?singleDoc# 2024数维杯数学建模竞赛B题完整思路代码论文分析如下&#xff1a; 问题分析 问题(1):分析正己烷不溶物(INS)对热解产率的…
阅读更多...
win11个性化锁屏界面怎么关闭？

win11个性化锁屏界面怎么关闭？

win11个性化锁屏界面关闭方法对于win11用户来说&#xff0c;关闭个性化锁屏界面是一个常见问题。本文将由php小编苹果详细介绍如何执行此操作&#xff0c;分步指导并提供操作截图。继续阅读以了解具体步骤。 win11个性化锁屏界面关闭方法 第一步&#xff0c;点击底部Windows图…
阅读更多...
最新文章

Copyright @ 2022~2023