微信小程序 地图(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 保存文件到本地实现方法
Nov 29 Javascript
Javascript浅谈之this
Dec 17 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
Apr 02 Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
Nov 02 Javascript
JavaScript中字符串拼接的基本方法
Jul 07 Javascript
jquery专业的导航菜单特效代码分享
Aug 29 Javascript
node.js路径处理方法以及绝对路径详解
Mar 04 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
angular2+node.js express打包部署的实战
Jul 27 Javascript
纯js实现画一棵树的示例
Sep 05 Javascript
解决pycharm双击但是无法打开的情况
Oct 31 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
在线增减.htpasswd内的用户
2006/10/09 PHP
php自定义函数之递归删除文件及目录
2010/08/08 PHP
Windows下安装PHP单元测试环境PHPUnit图文教程
2014/10/24 PHP
详解php命令注入攻击
2019/04/06 PHP
laravel自定义分页的实现案例offset()和limit()
2019/10/15 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
javascript一点特殊用法
2008/05/28 Javascript
javascript模仿msgbox提示效果代码
2008/06/10 Javascript
js控制框架刷新
2008/08/01 Javascript
My Desktop :) 桌面式代码
2008/12/29 Javascript
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
2009/08/09 Javascript
JS滚轮事件onmousewheel使用介绍
2013/11/01 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
2014/08/12 Javascript
JavaScript实现更改网页背景与字体颜色的方法
2015/02/02 Javascript
Jquery使用css方法改变样式实例
2015/05/18 Javascript
Javascript之String对象详解
2016/06/08 Javascript
微信小程序 设置启动页面的两种方法
2017/03/09 Javascript
JS实现闭包中的沙箱模式示例
2017/09/07 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
2018/08/15 Javascript
VUE基于NUXT的SSR 服务端渲染
2018/11/30 Javascript
vue-cli系列之vue-cli-service整体架构浅析
2019/01/14 Javascript
JS将时间秒转换成天小时分钟秒的字符串
2019/07/10 Javascript
Django如何实现内容缓存示例详解
2017/09/24 Python
使用Python处理Excel表格的简单方法
2018/06/07 Python
这可能是最好玩的python GUI入门实例(推荐)
2019/07/19 Python
Python 实现文件读写、坐标寻址、查找替换功能
2019/09/11 Python
pytorch自定义二值化网络层方式
2020/01/07 Python
通过实例了解Python str()和repr()的区别
2020/01/17 Python
HTML5-WebSocket实现聊天室示例
2016/12/15 HTML / CSS
高中语文教学反思
2014/01/16 职场文书
中秋节超市促销方案
2014/01/30 职场文书
活动宣传策划方案
2014/05/23 职场文书
传承焦裕禄精神思想汇报2014
2014/09/10 职场文书
2014年教师工作总结
2014/11/10 职场文书
检讨书范文
2019/04/16 职场文书
微信小程序实现聊天室功能
2021/06/14 Javascript