适配h5的时候要使用地图功能获取位置,选取了百度地图。首先在index.html文件引入。

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的key"></script>

之后的实现参考了些资料。具体代码如下:(这样就实现了拖动地图获取中间的地址信息功能)

componentDidMount = () => {
const { BMap, BMAP_STATUS_SUCCESS } = window
let self = this
map = new BMap.Map("container")
let poi let geolocation = new BMap.Geolocation()
geolocation.getCurrentPosition(function (r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
let mk = new BMap.Marker(r.point);
getAddress(r.point);
poi = new BMap.Point(r.longitude, r.latitude)
map.centerAndZoom(poi, 15)
map.addOverlay(mk)
map.panTo(r.point)
let centerPixel = map.pointToOverlayPixel(map.getCenter())
map.setCenter(map.overlayPixelToPoint({ x: centerPixel.x, y: centerPixel.y}))
let mkn
map.addEventListener('dragend', function () {
map.removeOverlay(mk)
map.removeOverlay(mkn)
let pixel = map.pointToOverlayPixel(map.getCenter());
let Point = map.overlayPixelToPoint({ x: pixel.x, y: pixel.y});
mkn = new BMap.Marker(Point);
getAddress(Point)
map.addOverlay(mkn);
})
} else {
alert('failed' + this.getStatus());
}
})
function getAddress(point) {
let gc = new BMap.Geocoder();
gc.getLocation(point, function (rs) {
let addComp = rs.addressComponents;
let address = addComp.district + addComp.street + addComp.streetNumber;
console.log(rs);
realaddress = address
self.setState({
address: realaddress
})
Taro.setStorageSync('site', realaddress)
});
} };

Taro之使用百度地图的更多相关文章

  1. 【详细教程】论android studio中如何申请百度地图新版Key中SHA1值

    一.写在前面 现在越来越多的API接口要求都要求提供我们的项目SHA1值,开发版目前还要求不高,但是发布版是必定要求的.而目前定位在各大APP中也较为常见,当下主流的百度地图和高德地图都在申请的时候会 ...

  2. C# 程序中嵌入百度地图

    本例是对WinForm中使用百度地图的简要介绍.百度地图目前支持Android开发,IOS开发,Web开发,服务接口,具体可以参照'百度地图开放平台'. [动态加载百度地图]涉及到的知识点: WebB ...

  3. Android 调用百度地图API

    一.到 百度地图开发平台下载SDK http://lbsyun.baidu.com/index.php?title=androidsdk/sdkandev-download 1.点击自定义下载 2.下 ...

  4. EChart系列:在echart3中使用百度地图扩展之后,如何获取到百度地图对象

    最近做项目想要在百度地图上叠加显示echart的散点图,然后根据地图的缩放等级和区域范围要显示不同的散点图,这中间折腾了好久.功能要求包括: (1)底图使用百度地图: (2)可以在地图上叠加显示ech ...

  5. 【月入41万】Mono For Android中使用百度地图SDK

    借助于Mono For Android技术,.Net开发者也可以使用自己熟悉的C#语言以及.Net来开发Android应用.由于Mono For Android把Android SDK中绝大部分类库都 ...

  6. Xamarin.Android之使用百度地图起始篇

    一.前言 如今跨平台开发层出不穷,而对于.NET而言时下最流行的当然还是Xamarin,不仅仅能够让我们在熟悉的Vs下利用C#开发,在对原生态类库的支持方面也有着非常的好支持,今天我们将会以百度地图类 ...

  7. 百度地图API的使用

    ------------------自说自话----------------------------- 好奇怪,习惯性使用有道云笔记记录心得与知识后就很少用博客园来记录了. 但是后来想想,有些东西还是 ...

  8. 最全面的百度地图JavaScript离线版开发

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/5822231.html 项目要求web版百度地图要离线开发.这里总结下自己的开发过程和经验. 大概需求是:每辆 ...

  9. 微信JS-SDK坐标位置转换为百度地图坐标

    微信JS-SDK开发过程中,使用getLocation获取坐标位置,如何将微信获取的坐标直接应用到百度地图中,显示以下效果: 说明:红色图标是从微信转换过来的位置,蓝色图标是周边位置.首先从微信开发流 ...

随机推荐

  1. form表单提交数据,页面必定会刷新,ajax提交数据不会刷新,做到悄悄提交,多选删除,ajax提交实例

    很多页面用到的模态对话框,如知明网站https://dig.chouti.com/的登录页都是模态对话框, 当点登录时,是用的ajax提交,因为输入错了信息,有返回消息,而页面没有刷新. jquery ...

  2. 利用grep参数查看某关键词前后几行内容

    查看文件中含有“哈哈哈”关键字所在行后5行内容 cat xxxxxx | grep -A 5 哈哈哈 查看文件中含有“哈哈哈”关键字所在行前5行内容 cat xxxxxx | grep -B 5 哈哈 ...

  3. Stripes视图框架与Struts2之间的比较

    https://blog.csdn.net/boonya/article/details/14227149 Stripes视图框架与Struts2的行为很相似,所以在这里做一个简要的对比,发现它们的优 ...

  4. 内存问题-JVM调优思路

    通常,内存的问题就是 GC 的问题,因为 Java 的内存由 GC 管理.有2种情况,一种是内存溢出了,一种是内存没有溢出,但 GC 不健康. 内存溢出的情况可以通过加上 -XX:+HeapDumpO ...

  5. ORACLE数据库自动备份压缩的批处理脚本 rar 7z

    使用7z的版本: @echo offset filename="d:\backup\dbname_%date:~0,10%"set zipfile="d:\backup\ ...

  6. obtainFreshBeanFactory()源码探究

    该方法目的是获取bean工厂.主要逻辑是:刷新bean工厂,获取bean工厂,进而返回bean工厂,但实际上并没有刷新bean工厂,基本上为空实现.源码如下: 而刷新bean工厂,正如注释所说,do ...

  7. maven私库nexus2.3.0-04迁移升级到nexus-3.16.1-02(异机迁移备份)

    环境信息: nexus2.3.0-04安装在32位Windows server 2003系统上 安装位置信息如下: 仓库迁移 Nexus的构件仓库都保存在sonatype-work目录中,nexus2 ...

  8. python之路——24

    复习 1.面向对象编程 思想:角色的抽象,创建类,实例化,操作实例2.面向对象的关键字 1.类的静态属性,存储在类的命名空间 2.类名.方法(对象),对象.方法 3.对象可以使用静态变量:类不可以使用 ...

  9. hex转mif文件 verilog

    用FPGA来跑ARM 核的时候,刚开始将Keil编译产生的hex文件拿来仿真和下到板子上的时候,发现程序运行不正确.细细观察仿真波形发现,在Altera的ROM IP中直接调用Keil产生的hex文件 ...

  10. ie浏览器许多图片放在一起会有间隙

    解决方法一(推荐):设置图片父元素font-size:0. 解决方法二:设置图片为float:并且图片设为块级元素.