Taro之百度地图显示定位点和信息
由于没有后台数据就随机生成点来模拟了。具体代码如下。
componentDidMount = () => {
const { BMap, BMAP_STATUS_SUCCESS } = window
let map = new BMap.Map("container")
let poi let geolocation = new BMap.Geolocation()
geolocation.getCurrentPosition(function (r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
poi = new BMap.Point(r.longitude, r.latitude)
map.centerAndZoom(poi, 15)
function addMarker(point, index) {
let myIcon = new BMap.Icon(businessl, new BMap.Size(20, 20), {
anchor: new BMap.Size(0, 0),
imageOffset: new BMap.Size(0, 0 + index - index),
imageSize: new BMap.Size(20, 20),
infoWindowAnchor: new BMap.Size(0, 0)
})
let marker = new BMap.Marker(point, { icon: myIcon })
map.addOverlay(marker)
marker.addEventListener("click", function () {
let opts = { width: 200, height: 100, title: String(index) }
let infoWindow = new BMap.InfoWindow(String(index), opts)
marker.openInfoWindow(infoWindow)
})
}
let bounds = map.getBounds()
console.log(bounds)
let lngSpan = bounds.He - bounds.Le
let latSpan = bounds.Vd - bounds.Xd
for (let i = 0; i < 10; i++) {
let point = new BMap.Point(bounds.Le + lngSpan * (Math.random() * 0.7 + 0.15),
bounds.Xd + latSpan * (Math.random() * 0.7 + 0.15))
addMarker(point, i)
}
}
})
};
Taro之百度地图显示定位点和信息的更多相关文章
- 百度地图点击地图显示地址详情的默认方法怎么关闭,去掉百度地图api图标信息
去掉百度地图api图标信息 调用百度地图API时,如果想去掉百度的logo,只需要在css里设置: <style> .anchorBL{display:none} </style&g ...
- Vue 百度地图显示规划路线
Vue 百度地图显示规划路线 1.首选引入相应的文件(建议单页面引入)(如有问题找上一篇博客园) 2.区别就是需要多引入几根不同的文件 import { BaiduMap, BmScale, BmGe ...
- 百度地图api窗口信息自定义
百度地图加载完后,完全可以用dom方法操作,比较常用的就是点击mark的弹窗,利用jQuery可以很快的创建弹窗,需要注意的就是地图都是异步加载,所以绑定时间要用 jQuery 事件 - delega ...
- Xamarin.Android 使用百度地图获取定位信息
最近做一个项目,web端使用百度地图,PDA使用手持机自带的GPS定位系统获取经纬度,然后再百度地图上显示该经纬度会有一定距离的差异,这里就像可乐的瓶子拧上雪碧的盖子,能拧的上却不美观.所以为了数据的 ...
- Vue接入百度地图显示及相关操作
Vue接入百度地图的API 首先你要有一个百度地图的key就是CK 申请网址:http://lbsyun.baidu.com/index.php?title=jspopular/guide/getke ...
- iframe引入百度地图显示企业位置
步骤一:打开下面这个地址:http://api.map.baidu.com/lbsapi/creatmap/index.html 步骤二:定位中心点 在打开的页面左侧,输入企业的详细地 ...
- 八卦某 G 的前端开发方式及流程--百度FEX前端nwind信息搜集神技能
他山之石,可以攻玉. 话说本人从毕业到现在一直在某 B 公司工作,前些年折腾过不少开发方式和工具,但总觉得或许有更好的方案,所以很好奇其它公司内部是如何工作的,我曾经浏览过某 Y 公司内部无所不包的 ...
- 百度echars 插件 横坐标信息倾斜显示
只需要 在xAxis 中加入 axisLabel:{ interval:0,//横轴信息全部显示 ...
- 【百度地图API】建立全国银行位置查询系统(五)——如何更改百度地图的信息窗口内容?
原文:[百度地图API]建立全国银行位置查询系统(五)--如何更改百度地图的信息窗口内容? 摘要: 酷讯.搜房.去哪儿网等大型房产.旅游酒店网站,用的是百度的数据库,却显示了自定义的信息窗口内容,这是 ...
随机推荐
- SaaS外包商 承接SaaS产品开发 Software-as-a-Service(软件即服务)
SaaS: Software-as-a-Service(软件即服务) 所谓SaaS.这一层是和你的生活每天接触的一层,大多是通过网页浏览器来接入.任何一个远程服务器上的应用都可以通过网络来运行,就是S ...
- 【转载】 Java中String类型的两种创建方式
本文转载自 https://www.cnblogs.com/fguozhu/articles/2661055.html Java中String是一个特殊的包装类数据有两种创建形式: String s ...
- VS重新生成项目失败,但是不报错
相信很多同行可能都遇到这种情况: 使用SVN或者其他项目管理工具checkout一个项目后,重新生成项目后,生成失败了,但是没有显示任何错误: 其实,这个大多数是因为类库里面的引用失效导致的,我们可以 ...
- 面向对象:静态属性,静态方法,组合,继承,衍生,继承之mro线性顺序列表,面向对象综合实例
1.静态属性(附有装饰器) class Room: def __init__(self,name,owner,width,length,height): self.name=name self.own ...
- 【mark】OS是否使用svc方式分开系统空间和用户空间的优劣
对于Cortex-M单片机,用户程序调用RTOS系统函数有两种思路: 假设创建任务的RTOS函数是xxx_task_create() 第一类:FreeRTOS.RT-Thread中采用的方法,和调用普 ...
- MVC object htmlAttributes,IDictionary<string, object> htmlAttributes 写法
MVC object htmlAttributes:new {style="color:red",width="12px",height="10px& ...
- mysql binlog抽取某个表的数据
1.先把binlog文件转化为sql --base64-output=decode-rows -v > /var/mydiag.sql 2.抽取某一个表的数据 grep -B0 -A27 -w ...
- 二叉树遍历(flist)(二叉树,已知中序层序,求先序)
问题 C: 二叉树遍历(flist) 时间限制: 1 Sec 内存限制: 128 MB提交: 76 解决: 53[提交][状态][讨论版][命题人:quanxing][Edit] [TestDat ...
- 为什么比特币和以太坊未必真得比EOS更去中心化?
在区块链行业里,有两派人一直在争论:一个是以比特币和以太坊为首的社群,另一个是以EOS为首的社群.这两群人一直在争论谁才是真正的未来,双方都认为自己这边更有未来.其中EOS抗争的重点就是100万TPS ...
- LINUX FTPshez
https://www.jb51.net/article/132337.htm FTPQ重启: service vsftpd restart