微信小程序 地图(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中.add()的使用分析
Apr 26 Javascript
利用javascript数组长度循环数组内所有元素
Dec 27 Javascript
js中数组(Array)的排序(sort)注意事项说明
Jan 24 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
Nov 30 Javascript
JS判断两个对象内容是否相等的方法示例
Apr 10 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
Koa2微信公众号开发之消息管理
May 16 Javascript
vue工程全局设置ajax的等待动效的方法
Feb 22 Javascript
Nginx设置为Node.js的前端服务器方法总结
Mar 27 Javascript
node获取客户端ip功能简单示例
Aug 24 Javascript
微信小程序wx.request的简单封装
Nov 13 Javascript
吃通javascript正则表达式
Apr 21 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函数spl_autoload_register()用法和__autoload()介绍
2012/02/04 PHP
CI框架安全类Security.php源码分析
2014/11/04 PHP
PHP可变变量学习小结
2015/11/29 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
PHP编程中的Session阻塞问题与解决方法分析
2017/08/07 PHP
PhpStorm 2020.3:新增开箱即用的PHP 8属性(推荐)
2020/10/30 PHP
JS类定义原型方法的两种实现的区别评论很多
2007/09/12 Javascript
基于jQuery的简单九宫格实现代码
2012/08/09 Javascript
简单的代码实现jquery定时器
2013/11/17 Javascript
取消选中单选框radio的三种方式示例介绍
2013/12/23 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
jQuery获取与设置iframe高度的方法
2016/08/01 Javascript
JS匹配日期和时间的正则表达式示例
2017/05/12 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
详解一个小实例理解js原型和继承
2019/04/24 Javascript
Vue实现点击当前行变色
2020/12/14 Vue.js
[00:05]ChinaJoy现场 DOTA2玩家高呼“CN DOTA BEST DOTA”
2019/08/04 DOTA
Python文件夹与文件的操作实现代码
2014/07/13 Python
零基础写python爬虫之抓取百度贴吧并存储到本地txt文件改进版
2014/11/06 Python
Python构建XML树结构的方法示例
2017/06/30 Python
使用Python的Django和layim实现即时通讯的方法
2018/05/25 Python
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
解决Django删除migrations文件夹中的文件后出现的异常问题
2019/08/31 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
Python入门基础之数字字符串与列表
2021/02/01 Python
html5使用canvas绘制一张图片
2014/12/15 HTML / CSS
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
几个判断型的面试题
2012/07/03 面试题
环境工程毕业生自荐信
2013/11/17 职场文书
高中同学聚会邀请函
2014/01/11 职场文书
物流管理毕业生自荐信范文
2014/03/15 职场文书
纪检干部现实表现材料
2014/08/21 职场文书
会计专业求职信范文
2015/03/19 职场文书
交通事故赔偿起诉书
2015/05/20 职场文书