Taro之使用百度地图
适配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之使用百度地图的更多相关文章
- 【详细教程】论android studio中如何申请百度地图新版Key中SHA1值
一.写在前面 现在越来越多的API接口要求都要求提供我们的项目SHA1值,开发版目前还要求不高,但是发布版是必定要求的.而目前定位在各大APP中也较为常见,当下主流的百度地图和高德地图都在申请的时候会 ...
- C# 程序中嵌入百度地图
本例是对WinForm中使用百度地图的简要介绍.百度地图目前支持Android开发,IOS开发,Web开发,服务接口,具体可以参照'百度地图开放平台'. [动态加载百度地图]涉及到的知识点: WebB ...
- Android 调用百度地图API
一.到 百度地图开发平台下载SDK http://lbsyun.baidu.com/index.php?title=androidsdk/sdkandev-download 1.点击自定义下载 2.下 ...
- EChart系列:在echart3中使用百度地图扩展之后,如何获取到百度地图对象
最近做项目想要在百度地图上叠加显示echart的散点图,然后根据地图的缩放等级和区域范围要显示不同的散点图,这中间折腾了好久.功能要求包括: (1)底图使用百度地图: (2)可以在地图上叠加显示ech ...
- 【月入41万】Mono For Android中使用百度地图SDK
借助于Mono For Android技术,.Net开发者也可以使用自己熟悉的C#语言以及.Net来开发Android应用.由于Mono For Android把Android SDK中绝大部分类库都 ...
- Xamarin.Android之使用百度地图起始篇
一.前言 如今跨平台开发层出不穷,而对于.NET而言时下最流行的当然还是Xamarin,不仅仅能够让我们在熟悉的Vs下利用C#开发,在对原生态类库的支持方面也有着非常的好支持,今天我们将会以百度地图类 ...
- 百度地图API的使用
------------------自说自话----------------------------- 好奇怪,习惯性使用有道云笔记记录心得与知识后就很少用博客园来记录了. 但是后来想想,有些东西还是 ...
- 最全面的百度地图JavaScript离线版开发
转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/5822231.html 项目要求web版百度地图要离线开发.这里总结下自己的开发过程和经验. 大概需求是:每辆 ...
- 微信JS-SDK坐标位置转换为百度地图坐标
微信JS-SDK开发过程中,使用getLocation获取坐标位置,如何将微信获取的坐标直接应用到百度地图中,显示以下效果: 说明:红色图标是从微信转换过来的位置,蓝色图标是周边位置.首先从微信开发流 ...
随机推荐
- linux修改root密码
或者是:sudo passwd root 提示输入新的密码.再确认输入一次密码回车,就可以完成root密码的修改. 更改成功,以后就用这个新的密码登陆到Linux系统中去
- Visual Studio Code 使用 Git插件报错 - Permission denied (publickey)
在使用GitHub的时候,为了避免每次输入用户名密码,都会使用SSH方式代替Https. 按网上教程,大多数使用SSH-KeyGen生成公私钥对,而后上传公钥至Github,并切换Repositori ...
- Java五种单例区别
详细请参考如下链接: http://www.voidcn.com/article/p-shzgsluz-bqa.html https://blog.csdn.net/android_freshman/ ...
- vim替换的两种方式
最近操作一个超过30MB的一个文本文件,常用的编辑器打开就死.最后使用Vim,一路非常顺畅.不愧是久经历史考验的编辑器. 如何在Vim中将空格更换为\t 这个使用\s功能.具体命令为:\s\ \/t/ ...
- MySQL数据库事务各隔离级别加锁情况--read committed && MVCC
之前已经转载过几篇相关的文章,此次基于mysql 5.7 版本,从测试和源码角度解释一下RR,RC级别为什么看到的数据不一样 先补充一下基础知识 基本知识 假设对于多版本(MVCC)的基础知识,有所了 ...
- 20175311 2018-2019-2 《Java程序设计》第7周学习总结
20175311 2018-2019-2 <Java程序设计>第7周学习总结 教材学习内容总结 这一周我主要学习了第八章的内容-常用实用类String类 构造String对象 字符串的并置 ...
- centos 7刚安装后无法联网解决
从6版本到7版本后, 7版本默认会关闭网卡 ,并且ifconfig 命令也换了 ip 命令来代替, 在这记录一下 ,希望 新人发现. 不是源的问题, 是压根没开网卡... 下面是写给萌新的: 先看一下 ...
- 【算法习题】数组中任意2个(3个)数的和为sum的组合
题1.给定一个int数组,一个数sum,求数组中和为sum的任意2个数的组合 @Test public void test_find2() { int[] arr = { -1, 0, 2, 3, 4 ...
- java web开发环境tomcat安装配置
1.下载jdk8并安装 2.下载tomcat windows环境下的免安装版zip包 3.设置两个环境变量 4.在tomcat的bin路径下双击startup.bat 启动tomcat服务器 5.使用 ...
- TensorFlow代码初识
直接看代码 import tensorflow as tf # tf.Variable生成的变量,每次迭代都会变化, # 这个变量也就是我们要去计算的结果,所以说你要计算什么,你是不是就把什么定义为V ...