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


Posted in Javascript onNovember 16, 2016

微信小程序 地图(map)实例

          这里是小编对微信小程序 地图(map API )做的资料整理,获取当前的地址,应该如何实现的实例,大家可以看下。

今天做到地图定位的模块.模拟器肯定是获取不到位置的.下面为真机测试结果.

上图:

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

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

经纬度不说了.定位用的,我这里直接输入的数字定位.但是有许多问题

下图中scale是缩放比例,这个属性目前无效.后期微信团队应该会修复.毕竟现在刚开始公测.这样就导致我不管怎么修改scale,我的地图都是在默认的缩放比例.如上图.

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

markers中的rotate是图标的旋转角度.如果需要平行于屏幕的图标,那就设置为0吧.

另外,覆盖物的图标是可以修改的.给iconPath设置路径即可.

上一段代码:

<!--index.wxml--> 
<button class="button" bindtap="getlocation" style="margin-top:30px" markers="{{markers}}">定位</button> 
<map longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" covers="{{covers}}" style="width: 100%; height: 300px;margin-top:30px"></map>
//index.js 
//获取应用实例 
var app = getApp() 
Page({ 
 data: { 
  latitude: 0,//纬度 
  longitude: 0,//经度 
  speed: 0,//速度 
  accuracy: 16,//位置精准度 
  markers: [], 
  covers: [], 
 }, 
 onLoad: function () { 
 }, 
 getlocation: function () { 
  var markers = [{ 
   latitude: 31.23, 
   longitude: 121.47, 
   name: '浦东新区', 
   desc: '我的位置' 
  }] 
  var covers = [{ 
   latitude: 31.23, 
   longitude: 121.47, 
   iconPath: '../images/car.png', 
   rotate: 0 
  }] 
  this.setData({ 
   longitude: 121.47, 
   latitude: 31.23, 
   markers: markers, 
   covers: covers, 
  }) 
 } 
})

2.wx.getLocation(OBJECT) 获取当前位置API

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

红色框标出的就是经纬度,速度,精确度

用gch02返回的坐标可以直接打开地图.

具体api见文档
微信小程序 地图(map)实例详解

3.wx.openLocation(OBJECT) 查看位置

最简单粗暴的就是直接给经纬度定位.

代码:

/index.js 
//获取应用实例 
var app = getApp() 
Page({ 
 data: { 
  latitude: 0,//纬度 
  longitude: 0,//经度 
  speed: 0,//速度 
  accuracy: 16,//位置精准度 
  markers: [], 
  covers: [], 
 }, 
 onLoad: function () { 
 }, 
 getlocation: function () { 
  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)实例详解

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

Javascript 相关文章推荐
JQuery学习笔记 nt-child的使用
Jan 17 Javascript
js获取图片大小的函数代码
Sep 20 Javascript
js的表单操作 简单计算器
Dec 29 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
Jan 17 Javascript
javascript动画算法实例分析
Jul 31 Javascript
Jquery删除css属性的简单方法
Dec 04 Javascript
Vue.js结合bootstrap实现分页控件
Mar 10 Javascript
layui表格实现代码
May 20 Javascript
深入浅析Node环境和浏览器的区别
Aug 14 Javascript
用js简单提供增删改查接口
May 12 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
May 23 Javascript
基于vue.js实现购物车
Jan 15 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
Nov 16 #Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
Nov 16 #Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
Nov 16 #Javascript
微信小程序 实现拖拽事件监听实例详解
Nov 16 #Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
Nov 16 #Javascript
JavaScript仿微博发布信息案例
Nov 16 #Javascript
使用Node.js给图片加水印的方法
Nov 15 #Javascript
You might like
php禁止直接从浏览器输入地址访问.php文件的方法
2014/11/04 PHP
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
基于GD2图形库的PHP生成图片缩略图类代码分享
2015/02/08 PHP
jQuery 获取对象 定位子对象
2010/05/31 Javascript
解决jQuery插件tipswindown与hintbox冲突
2010/11/05 Javascript
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
JavaScript之IE的fireEvent方法详细解析
2013/11/20 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
2014/05/18 Javascript
jQuery 复合选择器应用的几个例子
2014/09/11 Javascript
JavaScript中的bold()方法使用详解
2015/06/08 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
你所未知的3种Node.js代码优化方式
2016/02/25 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
详解node Async/Await 更好的异步编程解决方案
2018/05/10 Javascript
微信小程序开发问题之wx.previewImage
2018/12/25 Javascript
vue 组件开发原理与实现方法详解
2019/11/29 Javascript
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
js+cavans实现图片滑块验证
2020/09/29 Javascript
通过实例解析js可枚举属性与不可枚举属性
2020/12/02 Javascript
[02:55]DOTA2英雄基础教程 发条技师
2013/12/04 DOTA
Python入门教程之运算符与控制流
2016/08/17 Python
python2.7的编码问题与解决方法
2016/10/04 Python
在unittest中使用 logging 模块记录测试数据的方法
2018/11/30 Python
简单了解Django项目应用创建过程
2020/07/06 Python
Python模拟登录和登录跳转的参考示例
2020/10/30 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
Michael Kors英国官网:美国奢侈品品牌
2019/11/13 全球购物
端午节粽子促销活动方案
2014/02/02 职场文书
党的群众路线调研报告
2014/11/03 职场文书
现实表现证明材料
2015/06/19 职场文书
中学语文教学反思
2016/02/16 职场文书
MongoDB使用场景总结
2022/02/24 MongoDB
什么是SOLID
2022/03/24 Javascript
Java8 Stream API 提供了一种高效且易于使用的处理数据的方式
2022/04/13 Java/Android