由于没有后台数据就随机生成点来模拟了。具体代码如下。

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之百度地图显示定位点和信息的更多相关文章

  1. 百度地图点击地图显示地址详情的默认方法怎么关闭,去掉百度地图api图标信息

    去掉百度地图api图标信息 调用百度地图API时,如果想去掉百度的logo,只需要在css里设置: <style> .anchorBL{display:none} </style&g ...

  2. Vue 百度地图显示规划路线

    Vue 百度地图显示规划路线 1.首选引入相应的文件(建议单页面引入)(如有问题找上一篇博客园) 2.区别就是需要多引入几根不同的文件 import { BaiduMap, BmScale, BmGe ...

  3. 百度地图api窗口信息自定义

    百度地图加载完后,完全可以用dom方法操作,比较常用的就是点击mark的弹窗,利用jQuery可以很快的创建弹窗,需要注意的就是地图都是异步加载,所以绑定时间要用 jQuery 事件 - delega ...

  4. Xamarin.Android 使用百度地图获取定位信息

    最近做一个项目,web端使用百度地图,PDA使用手持机自带的GPS定位系统获取经纬度,然后再百度地图上显示该经纬度会有一定距离的差异,这里就像可乐的瓶子拧上雪碧的盖子,能拧的上却不美观.所以为了数据的 ...

  5. Vue接入百度地图显示及相关操作

    Vue接入百度地图的API 首先你要有一个百度地图的key就是CK 申请网址:http://lbsyun.baidu.com/index.php?title=jspopular/guide/getke ...

  6. iframe引入百度地图显示企业位置

    步骤一:打开下面这个地址:http://api.map.baidu.com/lbsapi/creatmap/index.html     步骤二:定位中心点     在打开的页面左侧,输入企业的详细地 ...

  7. 八卦某 G 的前端开发方式及流程--百度FEX前端nwind信息搜集神技能

    他山之石,可以攻玉. 话说本人从毕业到现在一直在某 B 公司工作,前些年折腾过不少开发方式和工具,但总觉得或许有更好的方案,所以很好奇其它公司内部是如何工作的,我曾经浏览过某 Y 公司内部无所不包的 ...

  8. 百度echars 插件 横坐标信息倾斜显示

    只需要 在xAxis   中加入 axisLabel:{                                  interval:0,//横轴信息全部显示                  ...

  9. 【百度地图API】建立全国银行位置查询系统(五)——如何更改百度地图的信息窗口内容?

    原文:[百度地图API]建立全国银行位置查询系统(五)--如何更改百度地图的信息窗口内容? 摘要: 酷讯.搜房.去哪儿网等大型房产.旅游酒店网站,用的是百度的数据库,却显示了自定义的信息窗口内容,这是 ...

随机推荐

  1. SaaS外包商 承接SaaS产品开发 Software-as-a-Service(软件即服务)

    SaaS: Software-as-a-Service(软件即服务) 所谓SaaS.这一层是和你的生活每天接触的一层,大多是通过网页浏览器来接入.任何一个远程服务器上的应用都可以通过网络来运行,就是S ...

  2. 【转载】 Java中String类型的两种创建方式

    本文转载自 https://www.cnblogs.com/fguozhu/articles/2661055.html Java中String是一个特殊的包装类数据有两种创建形式: String s ...

  3. VS重新生成项目失败,但是不报错

    相信很多同行可能都遇到这种情况: 使用SVN或者其他项目管理工具checkout一个项目后,重新生成项目后,生成失败了,但是没有显示任何错误: 其实,这个大多数是因为类库里面的引用失效导致的,我们可以 ...

  4. 面向对象:静态属性,静态方法,组合,继承,衍生,继承之mro线性顺序列表,面向对象综合实例

    1.静态属性(附有装饰器) class Room: def __init__(self,name,owner,width,length,height): self.name=name self.own ...

  5. 【mark】OS是否使用svc方式分开系统空间和用户空间的优劣

    对于Cortex-M单片机,用户程序调用RTOS系统函数有两种思路: 假设创建任务的RTOS函数是xxx_task_create() 第一类:FreeRTOS.RT-Thread中采用的方法,和调用普 ...

  6. MVC object htmlAttributes,IDictionary<string, object> htmlAttributes 写法

    MVC object htmlAttributes:new {style="color:red",width="12px",height="10px& ...

  7. mysql binlog抽取某个表的数据

    1.先把binlog文件转化为sql --base64-output=decode-rows -v > /var/mydiag.sql 2.抽取某一个表的数据 grep -B0 -A27 -w ...

  8. 二叉树遍历(flist)(二叉树,已知中序层序,求先序)

    问题 C: 二叉树遍历(flist) 时间限制: 1 Sec  内存限制: 128 MB提交: 76  解决: 53[提交][状态][讨论版][命题人:quanxing][Edit] [TestDat ...

  9. 为什么比特币和以太坊未必真得比EOS更去中心化?

    在区块链行业里,有两派人一直在争论:一个是以比特币和以太坊为首的社群,另一个是以EOS为首的社群.这两群人一直在争论谁才是真正的未来,双方都认为自己这边更有未来.其中EOS抗争的重点就是100万TPS ...

  10. LINUX FTPshez

    https://www.jb51.net/article/132337.htm FTPQ重启: service vsftpd restart