微信小程序开发之map地图实现教程


Posted in Javascript onJune 08, 2017

前言

微信小程序地图操作比较简单,api也很少,使用map组件来展示。说到地图,那就先来看基础定位:

定位用到wx.getLocation(OBJECT)函数,代码如下:

wx.getLocation({
 type: 'wgs84',
 success: function(res) {
 var latitude = res.latitude
 var longitude = res.longitude
 var speed = res.speed
 var accuracy = res.accuracy
 }
})

定位成功会返回四个参数值,如下:

微信小程序开发之map地图实现教程

map属性太多,先看一下:

微信小程序开发之map地图实现教程

如果用到地图,基本上所有属性都会用到。

下面一一看一下,我们先看效果图吧,先看真相:

微信小程序开发之map地图实现教程

这里我只用了一个markers,就是定位当前位置的红色markers,用法如下:

wx.getLocation({
  type: 'wgs84', // 默认为 wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标
  success: function (res) {

  _this.setData({
   latitude: res.latitude,
   longitude: res.longitude,
   markers: [{
   id: "1",
   latitude: res.latitude,
   longitude: res.longitude,
   width: 50,
   height: 50,
   iconPath: "/assests/imgs/my.png",
   title: "哪里"

   }],
   circles: [{
   latitude: res.latitude,
   longitude: res.longitude,
   color: '#FF0000DD',
   fillColor: '#7cb5ec88',
   radius: 3000,
   strokeWidth: 1
   }]

  })
  }

 })

这里加了circles,半径是3000米,具体的api可自行看官网。

接下来看看controls,控制层,在地图上显示控件,控件不随着地图移动,看API:

微信小程序开发之map地图实现教程

注意看示例图的右上角,有两个按钮,加减号,是控制地图scale的数值变化,动态缩放地图的,controls用法也很简单:

controls: [{
  id: 1,
  iconPath: '/assests/imgs/jian.png',
  position: {
  left: 320,
  top: 100 - 50,
  width: 20,
  height: 20
  },
  clickable: true
 },
 {
  id: 2,
  iconPath: '/assests/imgs/jia.png',
  position: {
  left: 340,
  top: 100 - 50,
  width: 20,
  height: 20
  },
  clickable: true
 }
 ]

最后我们看一张gif图:

微信小程序开发之map地图实现教程

最后上一下具体代码:

wxml:

<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="{{scale}}" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" circles="{{circles}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: {{view.Height}}px;"></map>

js:

Page({
 data: {
 Height: 0,
 scale: 13,
 latitude: "",
 longitude: "",
 markers: [],
 controls: [{
  id: 1,
  iconPath: '/assests/imgs/jian.png',
  position: {
  left: 320,
  top: 100 - 50,
  width: 20,
  height: 20
  },
  clickable: true
 },
 {
  id: 2,
  iconPath: '/assests/imgs/jia.png',
  position: {
  left: 340,
  top: 100 - 50,
  width: 20,
  height: 20
  },
  clickable: true
 }
 ],
 circles: []

 },

 onLoad: function () {
 var _this = this;

 wx.getSystemInfo({
  success: function (res) {
  //设置map高度,根据当前设备宽高满屏显示
  _this.setData({
   view: {
   Height: res.windowHeight
   }

  })



  }
 })

 wx.getLocation({
  type: 'wgs84', // 默认为 wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标
  success: function (res) {

  _this.setData({
   latitude: res.latitude,
   longitude: res.longitude,
   markers: [{
   id: "1",
   latitude: res.latitude,
   longitude: res.longitude,
   width: 50,
   height: 50,
   iconPath: "/assests/imgs/my.png",
   title: "哪里"

   }],
   circles: [{
   latitude: res.latitude,
   longitude: res.longitude,
   color: '#FF0000DD',
   fillColor: '#7cb5ec88',
   radius: 3000,
   strokeWidth: 1
   }]

  })
  }

 })

 },

 regionchange(e) {
 console.log("regionchange===" + e.type)
 },

 //点击merkers
 markertap(e) {
 console.log(e.markerId)

 wx.showActionSheet({
  itemList: ["A"],
  success: function (res) {
  console.log(res.tapIndex)
  },
  fail: function (res) {
  console.log(res.errMsg)
  }
 })
 },

 //点击缩放按钮动态请求数据
 controltap(e) {
 var that = this;
 console.log("scale===" + this.data.scale)
 if (e.controlId === 1) {
  // if (this.data.scale === 13) {
  that.setData({
  scale: --this.data.scale
  })
  // }
 } else {
  // if (this.data.scale !== 13) {
  that.setData({
  scale: ++this.data.scale
  })
  // }
 }


 },


})

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
常用的JS验证和函数汇总
Dec 23 Javascript
谷歌浏览器调试JavaScript小技巧
Dec 29 Javascript
jquery实现先淡出再折叠收起的动画效果
Aug 07 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
Aug 07 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
Jul 22 Javascript
Javascript中浏览器窗口的基本操作总结
Aug 18 Javascript
jQuery的Read()方法代替原生JS详解
Nov 08 Javascript
JS库之Highlight.js的用法详解
Sep 13 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
Apr 12 Javascript
基于JavaScript实现贪吃蛇游戏
Mar 16 Javascript
js实现验证码功能
Jul 24 Javascript
vant picker+popup 自定义三级联动案例
Nov 04 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
Jun 08 #Javascript
微信小程序开发之实现自定义Toast弹框
Jun 08 #Javascript
微信小程序开发之toast等弹框提示使用教程
Jun 08 #Javascript
javascript实现二叉树遍历的代码
Jun 08 #Javascript
微信小程序tabbar不显示解决办法
Jun 08 #Javascript
javascript实现二叉树的代码
Jun 08 #Javascript
微信小程序搜索组件wxSearch实例详解
Jun 08 #Javascript
You might like
深入apache配置文件httpd.conf的部分参数说明
2013/06/28 PHP
php计算给定时间之前的函数用法实例
2015/04/03 PHP
yii2缓存Caching基本用法示例
2016/07/18 PHP
IE JS编程需注意的内存释放问题
2009/06/23 Javascript
比较简单的异步加载JS文件的代码
2009/07/18 Javascript
div层的移动及性能优化
2010/11/16 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
2013/03/15 Javascript
JavaScript 判断浏览器是否支持SVG的代码
2013/03/21 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
2015/07/29 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
JS延时器提示框的应用实例代码解析
2016/04/27 Javascript
BootStrap无限级分类(无限极分类封装版)
2016/08/26 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
2016/10/10 Javascript
js模式化窗口问题![window.dialogArguments]
2016/10/30 Javascript
jQuery Chosen通用初始化
2017/03/07 Javascript
浅谈关于.vue文件中style的scoped属性
2017/08/19 Javascript
Promise扫盲贴
2019/06/24 Javascript
微信小程序实现上传多个文件 超过10个
2020/03/30 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
2020/05/27 Javascript
python封装对象实现时间效果
2020/04/23 Python
python判断图片宽度和高度后删除图片的方法
2015/05/22 Python
浅析python继承与多重继承
2018/09/13 Python
python高级特性和高阶函数及使用详解
2018/10/17 Python
python 判断矩阵中每行非零个数的方法
2019/01/26 Python
Python button选取本地图片并显示的实例
2019/06/13 Python
利用Python产生加密表和解密表的实现方法
2019/10/15 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
乔丹诺(Giordano)酒庄德国官网:找到最好的意大利葡萄酒
2017/12/28 全球购物
电子商务专业学生的自我鉴定
2013/11/28 职场文书
求职简历中个人的自我评价
2013/12/01 职场文书
顶岗实习计划书
2014/01/10 职场文书
交通事故赔偿协议书
2014/04/15 职场文书
活动总结模板
2014/05/09 职场文书
初中同学会活动方案
2014/08/22 职场文书
基督教追悼会答谢词
2015/09/29 职场文书
关于MySQL中的 like操作符详情
2021/11/17 MySQL