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

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. Ubuntu16.04主题美化

    系统更新 sudo apt-get update sudo apt-get upgrade # 卸载libreOffice libreoffice是ubuntu自带的开源office软件,体验效果不如 ...

  2. python之路——22

    学习内容 1.初识面向对象 类:抽象的,模子 对象:具体的,根据类规范 代码精简,修改方便,属性规范2.对象 查看属性 调用方法 __dict__,增删改查,通过字典语法进行3.类名 1.实例化 2. ...

  3. Spring AOP使用注解记录用户操作日志

    最后一个方法:核心的日志记录方法 package com.migu.cm.aspect; import com.alibaba.fastjson.JSON; import com.migu.cm.do ...

  4. 基于ssd的手势识别模型(object detection api方式)

    [Tensorflow]Object Detection API-训练自己的手势识别模型 1. 安装tensorflow以及下载object detection api 1.安装tensorflow: ...

  5. ES6系列之解构

    本系列是在平时阅读.学习.实际项目中有关于es6中的新特性.用发的简单总结,目的是记录以备日后温习:本系列预计包含let/const.箭头函数.解构.常用新增方法.Symbol.Set&Map ...

  6. Hibernate若干知识点

    1.主从表 主表A与从表B关联: 若存在1:N关系,查询条件为B表字段写法为: list.add(criteriaBuilder.like(root.joinList("projectCon ...

  7. jumpservice一步一步安装

    一步一步安装 (CentOS) 本文档旨在帮助用户了解各组件之间的关系, 生产环境部署建议参考 进阶安装文档 云服务器快速部署参考 极速安装 安装过程中遇到问题可参考 安装过程中常见的问题 测试推荐环 ...

  8. 朴素贝叶斯法(naive Bayes algorithm)

    对于给定的训练数据集,朴素贝叶斯法首先基于iid假设学习输入/输出的联合分布:然后基于此模型,对给定的输入x,利用贝叶斯定理求出后验概率最大的输出y. 一.目标 设输入空间是n维向量的集合,输出空间为 ...

  9. 记录4-Ubuntu 16.04用gparted调整分区

    几天在安装双系统时,没注意居然把swap分区设置成了50G.今天才发现,于是用gparted重新分区. 1. sudo apt-get install gparted 2. 重新用u盘启动进入ubun ...

  10. 名称 ****不是有效的标识符 sql

    假设存储过程:proc_test create proc proc_test @ProdID varchar(10) as begin declare @sql varchar(max) @sql = ...