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

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. IntellijIDEA常用快捷键总结

    转载自:http://blog.csdn.net/qq_17586821/article/details/52554731 下面的这些常用快捷键需要在实际操作中不断地体会才能真正感受到它们的方便之处. ...

  2. 未能加载文件或程序集“SuperMap.Mapping, Version=7.0.0.0, Culture=neutral, PublicKeyToken=0635c574ea890381”或它的某一个依赖项。试图加载格式不正确的程序。

    开发SuperMap.Mapping的时候,蹦出来的错误!让人摸不着头脑.查找原因如下: (1)安装32位的super map iobject后,进行开发,vs上选择目标平台是x86位的,然后从控件列 ...

  3. 调整Eclipse中代码字体字号

    Window-->preferences-->general-->appearence-->Colors and fonts中的Basic节点选text font,Edit一下

  4. 用crontab部署定时任务

    1.(centos)安装crontab服务 yum install crontabs 2.启动.停止.重启.重载服务 /sbin/service crond start /sbin/service c ...

  5. Mysql在sql中截取时间类型字段的年月日

    //显示年月日 select date_format(date ,'%Y-%m-%d' ) from talbe_a //根据年月日分组 select date_format(date ,'%Y-%m ...

  6. Livepeer中文白皮书(翻译)

    Livepeer Whitepaper 分布式视频流媒体传输协议及经济激励 Doug Petkanics doug@livepeer.org Eric Tang eric@livepeer.org 翻 ...

  7. MySQL单机单实例安装脚本(转载)

    说明:使用mysql generic tar.gz包快速安装mysql 三个文件installation_of_single_mysql.sh.template_install-my.cnf.mysq ...

  8. Python解释器的安装

    Python解释器的安装 作者:Eric 微信:loveoracle11g 下载Python Python-3.7.0(64-bit)下载链接地址: https://www.python.org/ft ...

  9. WRF安装过程

    WRF安装过程 1.  在虚拟机VMware上安装Fedora 12 x64操作系统. 2. 安装PGI9.01 a)         电驴上可下载[[顶级编译器].PGI.Workstation.C ...

  10. .net core2.1 配置

    ASPNETCORE_ENVIRONMENT Development(开发)Staging(预演)Production(生产) var builder = new ConfigurationBuild ...