微信小程序 地图(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 相关文章推荐
JS类定义原型方法的两种实现的区别评论很多
Sep 12 Javascript
微信JS接口汇总及使用详解
Jan 09 Javascript
jQuery插件开发汇总
May 15 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
Nov 30 Javascript
微信JSAPI Ticket接口签名详解
Jun 28 Javascript
JavaScript实现多重继承的方法分析
Jan 09 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
Vue.set() this.$set()引发的视图更新思考及注意事项
Aug 30 Javascript
Vue $emit $refs子父组件间方法的调用实例
Sep 12 Javascript
详解使用React.memo()来优化函数组件的性能
Mar 19 Javascript
vue实现跨域的方法分析
May 21 Javascript
js制作提示框插件
Dec 24 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
基于wordpress主题制作的具体实现步骤
2013/05/10 PHP
typecho插件编写教程(五):核心代码
2015/05/28 PHP
PHP 数组遍历foreach语法结构及实例
2016/06/13 PHP
Javascript中暂停功能的实现代码
2007/03/04 Javascript
js实现兼容IE6与IE7的DIV高度
2010/05/13 Javascript
jQuery Clone Bug解决代码
2010/12/22 Javascript
Javascript对象属性方法汇总
2013/11/21 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
2016/06/06 Javascript
Javascript6中字符串的四个新用法分享
2016/09/11 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
2016/12/22 Javascript
JavaScript实现自定义媒体播放器方法介绍
2017/01/03 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
ajax接收后台数据在html页面显示
2017/02/19 Javascript
JS查找数组中重复元素的方法详解
2017/06/14 Javascript
Angular指令之restict匹配模式的详解
2017/07/27 Javascript
Nodejs处理异常操作示例
2018/12/25 NodeJs
vue设置动态请求地址的例子
2019/11/01 Javascript
python学习笔记:字典的使用示例详解
2014/06/13 Python
Python创建日历实例
2014/08/21 Python
Python编程中归并排序算法的实现步骤详解
2016/05/04 Python
利用Python爬虫给孩子起个好名字
2017/02/14 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
pycharm进入时每次都是insert模式的解决方式
2021/02/05 Python
CSS3动画和HTML5新特性详解
2020/08/31 HTML / CSS
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
2016/03/14 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
Marc Jacobs官方网站:美国奢侈品牌
2017/08/29 全球购物
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
商务英语毕业生自荐信范文
2013/11/08 职场文书
2014年党课学习心得体会
2014/07/08 职场文书
青岛导游词
2015/02/12 职场文书
催款函怎么写
2015/06/24 职场文书
2016领导干部廉洁自律心得体会
2016/01/13 职场文书
纯html+css实现Element loading效果
2021/08/02 HTML / CSS