微信小程序 地图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 相关文章推荐
用javascript实现的激活输入框后隐藏初始内容
Jun 29 Javascript
jQuery 判断页面元素是否存在的代码
Aug 14 Javascript
详解jquery uploadify 上传文件
Nov 09 Javascript
类似天猫商品详情随浏览器移动的示例代码
Feb 27 Javascript
一个css与js结合的下拉菜单支持主流浏览器
Oct 08 Javascript
浅析JavaScript动画
Jun 10 Javascript
JavaScript制作弹出层效果
Dec 02 Javascript
彻底理解js面向对象之继承
Feb 04 Javascript
vue.js实现标签页切换效果
Jun 07 Javascript
vue-cli项目修改文件热重载失效的解决方法
Sep 19 Javascript
jQuery AJAX应用实例总结
May 19 jQuery
vue键盘事件点击事件加native操作
Jul 27 Javascript
微信小程序 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
Javascript实例教程(19) 使用HoTMetal(6)
2006/12/23 Javascript
js查找父节点的简单方法
2008/06/28 Javascript
Javascript控制页面链接在新窗口打开具体方法
2013/08/16 Javascript
jQuery把表单元素变为json对象
2013/11/06 Javascript
优化javascript的执行效率一些方法总结
2013/12/25 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
2014/01/13 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
基于jquery实现表格无刷新分页
2016/01/07 Javascript
jQuery事件绑定on()与弹窗实现代码
2016/04/28 Javascript
jQuery基于ID调用指定iframe页面内的方法
2016/07/06 Javascript
Nodejs基于LRU算法实现的缓存处理操作示例
2017/03/17 NodeJs
详解.vue文件中监听input输入事件(oninput)
2017/09/19 Javascript
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
vue文件树组件使用详解
2018/03/29 Javascript
JS实现快递单打印功能【推荐】
2018/06/21 Javascript
微信小程序实现卡片左右滑动效果的示例代码
2019/05/01 Javascript
vue实现分页栏效果
2019/06/28 Javascript
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
vue自定义标签和单页面多路由的实现代码
2020/05/03 Javascript
Python解析json之ValueError: Expecting property name enclosed in double quotes: line 1 column 2(char 1)
2017/07/06 Python
python 统计数组中元素出现次数并进行排序的实例
2018/07/02 Python
基于python的ini配置文件操作工具类
2019/04/24 Python
python线程中的同步问题及解决方法
2019/08/29 Python
Python random库使用方法及异常处理方案
2020/03/02 Python
python字符串常用方法及文件简单读写的操作方法
2020/03/04 Python
基于tf.shape(tensor)和tensor.shape()的区别说明
2020/06/30 Python
CSS3 animation实现简易幻灯片轮播特效
2016/09/27 HTML / CSS
详解Canvas事件绑定
2018/06/27 HTML / CSS
印度在线购物网站:Paytmmall
2019/07/24 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?
2014/07/27 面试题
火箭队口号
2014/06/18 职场文书
幼儿园教师节演讲稿
2014/09/03 职场文书
十佳少先队员演讲稿
2014/09/12 职场文书
酒店前台岗位职责
2015/04/16 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
小学生节约用水倡议书
2019/08/12 职场文书