微信小程序 地图(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 相关文章推荐
javascript CSS画图之基础篇
Jul 29 Javascript
来自国外的14个图片放大编辑的jQuery插件整理
Oct 20 Javascript
Ubuntu 11.10 安装Node.js的方法
Nov 30 Javascript
通过Javascript创建一个选择文件的对话框代码
Jun 16 Javascript
jquery实现Ctrl+Enter提交表单的方法
Jul 21 Javascript
JavaScript在网页中画圆的函数arc使用方法
Nov 13 Javascript
全面详细的jQuery常见开发技巧手册
Feb 21 Javascript
解决Window10系统下Node安装报错的问题分析
Dec 13 Javascript
基于JS实现移动端左滑删除功能
Jul 28 Javascript
JavaScript实现的简单加密解密操作示例
Jun 01 Javascript
微信小程序mpvue点击按钮获取button值的方法
May 29 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
Jan 07 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
一个分页的论坛
2006/10/09 PHP
php获取地址栏信息的代码
2008/10/08 PHP
yii框架中的Url生产问题小结
2012/01/16 PHP
CI框架入门示例之数据库取数据完整实现方法
2014/11/05 PHP
PHP中使用break跳出多重循环代码实例
2015/01/21 PHP
PHP编程获取各个时间段具体时间的方法
2017/05/26 PHP
PHP实现webshell扫描文件木马的方法
2017/07/31 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
JS 实现获取打开一个界面中输入的值
2013/03/19 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
JavaScript学习笔记之JS事件对象
2015/01/22 Javascript
后台获取ZTREE选中节点的方法
2015/02/12 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
2015/12/10 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
总结JavaScript的正则与其他语言的不同之处
2016/08/25 Javascript
JS前端加密算法示例
2016/12/22 Javascript
Bootstrap Table使用整理(三)
2017/06/09 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
Linux下python制作名片示例
2018/07/20 Python
Python中生成一个指定长度的随机字符串实现示例
2019/11/06 Python
python程序文件扩展名知识点详解
2020/02/27 Python
利用Python如何实时检测自身内存占用
2020/05/09 Python
Python PyQt5模块实现窗口GUI界面代码实例
2020/05/12 Python
Python判断字符串是否为合法标示符操作
2020/09/03 Python
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
2019/01/17 HTML / CSS
HTML5新增的8类INPUT输入类型介绍
2015/07/06 HTML / CSS
人力资源经理的岗位职责
2014/03/02 职场文书
《最佳路径》教学反思
2014/04/13 职场文书
课内比教学心得体会
2014/09/09 职场文书
个人遵守党的政治纪律情况对照检查材料思想汇报
2014/09/25 职场文书
家庭财产分割协议书范本
2014/11/24 职场文书
教师党员个人总结
2015/02/10 职场文书
2015年三万活动总结
2015/03/25 职场文书
交通安全学习心得体会
2016/01/18 职场文书
python生成随机数、随机字符、随机字符串
2021/04/06 Python