微信小程序 地图map实例详解


Posted in Javascript onJune 07, 2017

微信小程序 地图map实例详解

wxml:

class="button" bindtap="getlocation" style="margin-top:30px" markers="{{markers}}">定位 
 longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" covers="{{covers}}" 
style="width: 100%; height: 300px;margin-top:30px">

js:

//获取应用实例 
var app = getApp()
Page({
data: {
latitude: 0,//纬度 
longitude: 0,//经度 
speed: 0,//速度 
accuracy: 16,//位置精准度 
markers: [],
covers: [],
},
onLoad: function () {
},
getlocation: function () {
var markers = [{
latitude: 28.211400,
longitude: 112.914250,
name: '喜地大厦',
desc: '我的位置'
}]
var covers = [{
latitude: 28.211400,
longitude: 112.914250,
iconPath: '/image/ic_position.png',
rotate: 0
}]
this.setData({
longitude: 112.914250,
latitude: 28.211400,
markers: markers,
covers: covers,
})
wx.getLocation({
type: 'gcj02',
success: function (res) {
var latitude = res.latitude
var longitude = res.longitude
var speed = res.speed
var accuracy = res.accuracy
console.log("latitude:" + latitude)
console.log("longitude:" + longitude)
console.log("speed:" + speed)
console.log("accuracy:" + accuracy)
wx.openLocation({
latitude: latitude,
longitude: longitude,
scale: 28
})
}
})
}
})

效果图:

微信小程序 地图map实例详解

微信小程序 地图map实例详解

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
input的focus方法使用
Mar 13 Javascript
网页整体变灰白色(兼容各浏览器)实例
Apr 21 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
Jul 09 Javascript
Knockout visible绑定使用方法
Nov 15 Javascript
js获取当月最后一天实例代码
Nov 19 Javascript
JavaScript中Boolean对象的属性解析
Oct 21 Javascript
node.js回调函数之阻塞调用与非阻塞调用
Nov 13 Javascript
浅谈JS中String()与 .toString()的区别
Oct 20 Javascript
Bootstrap fileinput文件上传预览插件使用详解
May 16 Javascript
webpack external模块的具体使用
Mar 10 Javascript
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
微信小程序 http请求的session管理
Jun 07 #Javascript
Ionic2开发环境搭建教程
Aug 20 #Javascript
微信小程序Redux绑定实例详解
Jun 07 #Javascript
Ionic3 UI组件之Gallery Modal详解
Jun 07 #Javascript
vue2.0 中#$emit,$on的使用详解
Jun 07 #Javascript
vue2.0 自定义日期时间过滤器
Jun 07 #Javascript
详解Node.js 命令行程序开发教程
Jun 07 #Javascript
You might like
跟我学小偷程序之成功偷取首页(第三天)
2006/10/09 PHP
php下通过curl抓取yahoo boss 搜索结果的实现代码
2011/06/10 PHP
php图片加中文水印实现代码分享
2012/10/31 PHP
php实现的美国50个州选择列表实例
2015/04/20 PHP
php中的常用魔术方法汇总
2016/02/14 PHP
form自动提交实例讲解
2017/07/10 PHP
Laravel模糊查询区分大小写的实例
2019/09/29 PHP
JavaScript入门学习书籍推荐
2008/06/12 Javascript
基于jquery实现的表格分页实现代码
2011/06/21 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
2015/09/24 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
jQuery焦点图左右转换效果
2016/12/12 Javascript
基于vue中css预加载使用sass的配置方式详解
2018/03/13 Javascript
jQuery实现表单动态添加与删除数据操作示例
2018/07/03 jQuery
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
2018/09/27 Javascript
详解Python中的type()方法的使用
2015/05/21 Python
Python实现的多线程http压力测试代码
2017/02/08 Python
Python创建普通菜单示例【基于win32ui模块】
2018/05/09 Python
python实现换位加密算法的示例
2018/10/14 Python
利用python3 的pygame模块实现塔防游戏
2019/12/30 Python
Django数据库操作之save与update的使用
2020/04/01 Python
Hunkemöller西班牙:欧洲最大的内衣连锁店
2018/08/15 全球购物
CK加拿大官网:Calvin Klein加拿大
2020/03/14 全球购物
测试驱动开发的主要步骤是什么
2014/12/10 面试题
实习生自我鉴定范文
2013/12/05 职场文书
《再别康桥》教学反思
2014/02/12 职场文书
学校三八妇女节活动情况总结
2014/03/09 职场文书
相亲大会策划方案
2014/06/05 职场文书
十八大标语口号
2014/10/09 职场文书
2014年公路养护工作总结
2014/12/04 职场文书
刑事撤诉申请书
2015/05/18 职场文书
2015小学音乐教师个人工作总结
2015/07/21 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书
浅谈TypeScript 索引签名的理解
2021/10/16 Javascript
Vue3中的Refs和Ref详情
2021/11/11 Vue.js