效果图如下:

绿色地标固定在中间,移动地图的时候获取对应信息。

先定义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开发小程序移动地图固定中间获取地址的更多相关文章

  1. Taro:使用taro完成小程序开发

    前言:taro是一个可以很好实现一次开发,多端统一的框架,本文只介绍它小程序端开发的一些内容.小程序项目搭建gitup已经有很清楚的说明:https://github.com/NervJS/taro ...

  2. 支付宝小程序室内地图导航开发-支付宝小程序JS加载esmap地图

    如果是微信小程序开发,请参考微信小程序室内地图导航开发-微信小程序JS加载esmap地图文章 一.在支付宝小程序里显示室内三维地图 需要满足的两个条件 调用ESMap室内地图需要用到小程序web-vi ...

  3. 使用mpvue开发小程序

    前言: 最近接到小程序的开发需求,由于之前也没开发过小程序,心情还是有点激动.先花15分钟看一遍小程序官方文档,再花10分钟看一遍mpvue官方文档,然后拿着原型图和UI图就开干.踩了不少坑,写篇博客 ...

  4. 用RegularJS开发小程序 — mpregular解析

    本文来自网易云社区. Mpregular 是基于 RegularJS(简称 Regular) 的小程序开发框架.开发者可以将直接用 RegularJS 开发小程序,或者将现有的 RegularJS 应 ...

  5. 微信小程序map地图的一些使用注意事项

    1.小程序组件map,在微信7.0.4以上(不包括7.0.4)层级问题官方已作更新,可在map上随意添加任何标签使用z-index即可:微信7.0.4版本以下map组件层级默认是最高的,只能使用官方提 ...

  6. 微信小程序--百度地图坐标转换成腾讯地图坐标

    最近开发小程序时出现一个问题,后台程序坐标采用的时百度地图的坐标,因为小程序地图时采用的腾讯地图的坐标系,两种坐标有一定的误差,导致位置信息显示不正确.现在需要一个可以转换两种坐标的方法,经过查询发现 ...

  7. 微信小程序红包开发 小程序发红包 开发过程中遇到的坑 微信小程序红包接口的

    最近公司在开发一个小程序红包系统,客户抢到红包需要提现.也就是通过小程序来给用户发红包. 小程序如何来发红包呢?于是我想到两个方法. 之前公众号开发一直用了的.一个是红包接口,一个是企业支付接口.一开 ...

  8. 使用mpvue开发小程序教程(一)

    前段时间,美团开源了mpvue这个项目,使得我们又多了一种用来开发小程序的框架选项.由于mpvue框架是完全基于Vue框架的(重写了其runtime和compiler),因此在用法上面是高度和Vue一 ...

  9. 使用mpvue开发小程序教程(二)

    在上篇文章中,我们介绍了使用mpvue开发小程序所需要的一些开发环境的搭建,并创建了第一个mpvue小程序代码骨架并将其运行起来.在本文中,我们来研究熟悉一下mpvue项目的主要目录和文件结构. 在V ...

随机推荐

  1. 使HTML5支持RTSP流 微信直播RTSP流 微信播放RTSP直播流(HTML5播放rtsp,web播放rtsp,微信支持rtsp)

    一.大家都知道HTML5的VIDEO可以播放视频,但是H5不支持RTSP播放,所以需要中间件! 二.我们经理长年的努力,开发了HTML5支持RTSP的中间件,使HTML5支持RTSP直播! 三.不卡顿 ...

  2. python3-基础2

    数据类型:数字 .字符.列表.字典.集合 字符串: 要用引号引起来  单引号 双引号  三引号 字符串只能存一个值,没有单独字符一说 取字符串值  print(name[0])    中括号表示 常用 ...

  3. 使用 FFMPEG 命令为视频嵌入字幕

    有些电影的视频与字幕是分离的,如果在视频中嵌入字幕,那么观看起来会更方便一些,不必在播放前额外去加载字幕文件. 在 Linux 中,可以使用 ffmpeg 命令实现上述功能. ffmpeg -i in ...

  4. 洛谷P1039 侦探推理(模拟)

    侦探推理 题目描述 明明同学最近迷上了侦探漫画<柯南>并沉醉于推理游戏之中,于是他召集了一群同学玩推理游戏.游戏的内容是这样的,明明的同学们先商量好由其中的一个人充当罪犯(在明明不知情的情 ...

  5. NPOI helper

    using NPOI.HSSF.UserModel; using NPOI.HSSF.Util; using NPOI.SS.UserModel; using NPOI.XSSF.UserModel; ...

  6. GoLand、Pycharm注册码

    GoLand.Pycharm注册码 K71U8DBPNE-eyJsaWNlbnNlSWQiOiJLNzFVOERCUE5FIiwibGljZW5zZWVOYW1lIjoibGFuIHl1IiwiYXN ...

  7. C语言博客作业6---结构体&文件

    C语言博客作业6---结构体&文件 1.本章学习总结(2分) 1.1思维导图 请以思维导图总结本周的学习内容.如下图所示: 1.2.学习体会 描述本周学习感受,也可以在这里提出你不理解地方.对 ...

  8. 逆向工程vgenerator(一)

    前言 想要自己实现一个mybatis-generator类似的轮子,目前只实现MySQL部分的方法.利用下班时间,写了一个小项目,实现了这个功能.我准备分成三篇博客来写这个东西. 基类 /** *基类 ...

  9. Python全栈开发记录_第六篇(生成器和迭代器)

    说生成器之前先说一个列表生成式:[x for x in range(10)]   ->[0,1,2....,9]这里x可以为函数(因为对python而言就是一个对象而已),range(10)也可 ...

  10. C 语言实现基于 Linux 的端口扫描程序

    Socket 常用函数: ⑴int socket(int protofamily, int type, int protocol); protofamily:即协议域,又称为协议族(family).常 ...