Taro开发小程序移动地图固定中间获取地址
效果图如下:

绿色地标固定在中间,移动地图的时候获取对应信息。
先定义map。
<Map className="location" id={location}
latitude={this.state.latitude}
longitude={this.state.longitude}
markers={this.state.markers}
scale='16'
onRegionchange={this.regionchange}
// controls={this.state.controls}
show-location
>
<CoverView className="coverloc"><CoverImage src={locationpng} className="coverlocpng"></CoverImage></CoverView>
</Map>
写对应样式。
.coverloc {
z-index:;
margin:auto;
text-align: center;
position:absolute;
left:50%;
top:50%;
height: 100px;
width: 100px;
.coverlocpng {
height: 100px;
width: 100px;
}
}
写对应的移动地图的函数,需要用到腾讯地图对微信小程序的支持。
regionchange = (e) => {
console.log(e)
let _this = this
let value
if (e.type == 'end') {
this.mapCtx.getCenterLocation({
success: function (res) {
qqmapsdk.reverseGeocoder({
location: {
latitude: res.latitude,
longitude: res.longitude
},
success: function (resc) {
console.log(resc)
value = resc.result.address_component.street_number //address
Taro.setStorageSync('site', value)
console.log('地址是:' + vlaue)
}
})
}
})
}
}
好,完成,这样就可以简单的拿取到地图的中间位置信息了。
Taro开发小程序移动地图固定中间获取地址的更多相关文章
- Taro:使用taro完成小程序开发
前言:taro是一个可以很好实现一次开发,多端统一的框架,本文只介绍它小程序端开发的一些内容.小程序项目搭建gitup已经有很清楚的说明:https://github.com/NervJS/taro ...
- 支付宝小程序室内地图导航开发-支付宝小程序JS加载esmap地图
如果是微信小程序开发,请参考微信小程序室内地图导航开发-微信小程序JS加载esmap地图文章 一.在支付宝小程序里显示室内三维地图 需要满足的两个条件 调用ESMap室内地图需要用到小程序web-vi ...
- 使用mpvue开发小程序
前言: 最近接到小程序的开发需求,由于之前也没开发过小程序,心情还是有点激动.先花15分钟看一遍小程序官方文档,再花10分钟看一遍mpvue官方文档,然后拿着原型图和UI图就开干.踩了不少坑,写篇博客 ...
- 用RegularJS开发小程序 — mpregular解析
本文来自网易云社区. Mpregular 是基于 RegularJS(简称 Regular) 的小程序开发框架.开发者可以将直接用 RegularJS 开发小程序,或者将现有的 RegularJS 应 ...
- 微信小程序map地图的一些使用注意事项
1.小程序组件map,在微信7.0.4以上(不包括7.0.4)层级问题官方已作更新,可在map上随意添加任何标签使用z-index即可:微信7.0.4版本以下map组件层级默认是最高的,只能使用官方提 ...
- 微信小程序--百度地图坐标转换成腾讯地图坐标
最近开发小程序时出现一个问题,后台程序坐标采用的时百度地图的坐标,因为小程序地图时采用的腾讯地图的坐标系,两种坐标有一定的误差,导致位置信息显示不正确.现在需要一个可以转换两种坐标的方法,经过查询发现 ...
- 微信小程序红包开发 小程序发红包 开发过程中遇到的坑 微信小程序红包接口的
最近公司在开发一个小程序红包系统,客户抢到红包需要提现.也就是通过小程序来给用户发红包. 小程序如何来发红包呢?于是我想到两个方法. 之前公众号开发一直用了的.一个是红包接口,一个是企业支付接口.一开 ...
- 使用mpvue开发小程序教程(一)
前段时间,美团开源了mpvue这个项目,使得我们又多了一种用来开发小程序的框架选项.由于mpvue框架是完全基于Vue框架的(重写了其runtime和compiler),因此在用法上面是高度和Vue一 ...
- 使用mpvue开发小程序教程(二)
在上篇文章中,我们介绍了使用mpvue开发小程序所需要的一些开发环境的搭建,并创建了第一个mpvue小程序代码骨架并将其运行起来.在本文中,我们来研究熟悉一下mpvue项目的主要目录和文件结构. 在V ...
随机推荐
- golang操作memcached 转自https://blog.csdn.net/weixin_37696997/article/details/78760397
go使用memcached需要第三方的驱动库,这里有一个库是memcached作者亲自实现的,代码质量效率肯定会有保障 1:安装 go get github.com/bradfitz/gomemcac ...
- E4A 与JS交互事件无反应
今天碰到一个问题,E4A与JS的交互,调用JS函数后,事件没有任何反应,给JS赋值,会看到浏览框中有内容显示,但是事件为什么就没反应呢. 把官方的例程打开编译试了也不行. 后来在群中问了,原来是这里设 ...
- mysql主从原理及配置
一.mysql集群架构: 1.一主一从 2.双主 3.一主多从(扩展mysql的读性能) 4.多主一从(5.7开始支持) 5.联机复制 关系图: 二.配置主从用途及条件 2.1用途 1.保障可用性,故 ...
- SecureCRT 6.7 vim高亮
cp /etc/vimrc ~/.vimrc set nocompatible "去掉有关vi一致性模式,避免以前版本的bug和局限 set nu! ...
- Vmware虚拟中克隆主机没IP地址?怎么解决?
Vmware虚拟中克隆主机没IP地址?怎么解决? 修改网卡的配置文件: 清空如下的文件: 重启主机即可!
- RN 各种小问题
问题:vs code 无法启动 双击无反应 方法:控制台 输入 netsh winsock reset 重启 vs 问题:RN Debugger Network 不显示 源网页:https://git ...
- python3学习笔记十(循环语句)
参考http://www.runoob.com/python3/python3-loop.html 循环语句 while循环 # !/usr/bin/env python3 n = 100 sum = ...
- 通过c++11的condition_variable实现的有最大缓存限制的队列
之前曾写过一个通过C++11的condition_variable实现的有最大缓存限制的队列,底层使用std::queue来实现,如果想要提升性能的话,可以考虑改用固定的长度环形数组.环形数组实现如下 ...
- [UE4]Drop,扔物品
一.Drop只要将Grab做的操作反着这一遍就可以:开启模拟物理.取消附加(使用:DetachFromActor方法,同样的rule也需要使用Keep World) 二.
- jar包冲突排解方法(sbt)
jar包依赖冲突,版本不兼容会导致各种各样的问题.这里推荐一款sbt插件用于查找项目中的jar包依赖关系,通过该插件可以轻松的看出某个jar包依赖哪些jar,以及某个jar被哪些jar所依赖.此外该插 ...