小程序map学习:使用map获取当前位置并显示出来
在小程序开发的过程中,我碰到过一个做map的需求,在我开发的时候我碰到了一些问题,这里总结出来,给大家一些解决方法。
代码片段分享:
js部分:
var amapFile = require('../../libs/amap-wx.js');//如:../../libs/amap-wx.js
Page({
data: {
markers: [],
latitude: '',
longitude: '',
textData: {},
dome:false
},
onLoad: function() {
var that = this; wx.getLocation({
type: 'wgs84',
success: (res) => {
console.log(res);
that.setData({
latitude: res.latitude,
longitude: res.longitude
})
var marker = [{
id: 1,
latitude: res.latitude,
longitude: res.longitude,
iconPath: "../../images/marker.png",
width: 22,
height: 32,
callout: {
content: "你的位置\n换行内容",
color: "#333333",
fontSize: 13,
borderRadius: 20,
bgColor: "#ffffff",
textAlign: "center" ,
padding: 10,
display: 'ALWAYS'
}
}]
that.setData({
markers: marker
});
that.setData({
dome: true
});
},
}); },
})
页面部分
<view class="map_container">
<map class="map" id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="11" markers="{{markers}}" wx:if="{{dome}}"></map>
</view>
css部分
.map_container{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width:750rpx;
height: 100vh;
}
map{
width:100%;
height: 100%;
}
遇到的问题:看上面的代码,大家可以发现,我的map是用if来控制的,这样是为了防止markers动态更新后map没反应,这里我的解决方法是直接重构,如果有其他大家欢迎大家在下面分享出来。
小程序map学习:使用map获取当前位置并显示出来的更多相关文章
- 微信小程序开发学习资料
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- 微信小程序js学习心得体会
微信小程序js学习心得体会 页面控制的bindtap和catchtap 用法,区别 <button id='123' data-userDate='100' bindtap='tabMessag ...
- 支付宝小程序serverless---插入数据后获取数据的主键_id(mongodb)
支付宝小程序serverless---插入数据后获取数据的主键_id(mongodb) 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除, ...
- mpvue小程序开发之 wx.getUserInfo获取用户信息授权
一.背景 在使用美团的mpvue2.0框架搭建起小程序项目后,做获取用户信息时遇到一些问题:微信小程序更新api后,获取用户信息只能通过button上的绑定方法 来获取用户信息,vue上方法绑定不能直 ...
- 微信小程序一步一步获取UnionID,实现自动登录
思路: 1.小程序端获取用户ID,发送至后台 2.后台查询用户ID,如果找到了该用户,返回Token,没找到该用户,保存到数据库,并返回Token 小程序端如何获取用户ID: 小程序端 wx.getU ...
- Taro开发小程序移动地图固定中间获取地址
效果图如下: 绿色地标固定在中间,移动地图的时候获取对应信息. 先定义map. <Map className="location" id={location} latitud ...
- 微信小程序实现城市定位:获取当前所在的国家城市信息
微信小程序中,我们可以通过调用wx.getLocation()获取到设备当前的地理位置信息,这个信息是当前位置的经纬度.如果我们想获取当前位置是处于哪个国家,哪个城市等信息,该如何实现呢? 微信小程序 ...
- 小程序入门学习Demo
技术:小程序 概述 适合学习小程序的初级开发人员,入门教程 详细 代码下载:http://www.demodashi.com/demo/14956.html 小程序周边美甲美发预约Demo 代码主 ...
- 微信小程序入门学习之事件 事件对象 冒泡非冒泡事件(1)
这关于事件的学习,可以自己复制到微信开发者工具上自己运行试试. 首先这里有两个文件.js 和.wxml 文件 首先给出.js文件下代码 // pages/news/news.js Page({ /** ...
随机推荐
- springboot使用aspectJ
添加springboot-aop的starter <dependency> <groupId>org.springframework.boot</groupId> ...
- Windows 64位下安装Redis 以及 可视化工具Redis Desktop Manager的安装和使用
二.下载Windows版本的Redis 由于现在官网上只提供Linux版本的下载,所以我们只能在Github上下载Windows版本的Redis Windows版本的Redis下载地址:https:/ ...
- 一个简单的struts2项目
1.新建一个 Dynamic Web Project 项目 2.配置 struts.xml文件 <?xml version="1.0" encoding="UTF- ...
- Java基础集合简单总结
集合 Collection单列集合有List 和 Set List集合有: ArrayList集合 特点: 1.存取有序 可以重复 有索引 2.底层是数组实现,查询快,增删慢 ArrayList底层: ...
- Java虚拟机详解04----GC算法和种类
[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...
- ATM管理系统
一.题目要求 编写一个ATM管理系统,语言不限,要求应包括以下主要功能: (1)开户,销户 (2)查询账户余额 (3)存款 (4)取款 (5)转账(一个账户转到另一个账户)等 二.代码提交 开户 pu ...
- jQuery EasyUI学习二
1. 课程介绍 1. Datagrid组件(掌握) 2. Dialog.form组件(掌握) 3. Layout.Tabs;(掌握) Datagrid组件 2.1. 部署运行pss启动无错 ...
- android中VideoView播放sd卡上面的视频
(1)videoView组件只支持MP4和3gp格式的视屏播放,如果想播放其它视屏格式的文件,还得开发能够播放的视屏播放器 (2)videoView组件功能比较单一,如果想开发功能丰富的播放器,还得重 ...
- java中byte,byte[]和int之间的转换
1>byte类型转换为,直接隐式转换,适用于要求保持数值不变,例如要求进行数值计算 如 byte b=0x01; int i=b; 2>另一种是要求保持最低字节中各个位不变,3个高字节全部 ...
- spark常用提交任务的基本的参数配置
#!/bin/bash #队列名 根据yarn的队列提交 realtime_queue=root #提交的任务名 my_job_name="OrderQZ" spark-shell ...