微信小程序开发之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 相关文章推荐
javascript开发随笔二 动态加载js和文件
Nov 25 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
Jan 04 Javascript
Js+Jq获取URL参数的集中方法示例代码
May 20 Javascript
JS控制输入框内字符串长度
May 21 Javascript
JavaScript数据结构和算法之图和图算法
Feb 11 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
Aug 27 Javascript
原生JavaScript实现滚动条效果
Mar 24 Javascript
javascript类型系统_正则表达式RegExp类型详解
Jun 24 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
Aug 25 Javascript
jQuery实现滚动效果
Nov 17 jQuery
发布一款npm包帮助理解npm的使用
Jan 03 Javascript
微信小程序-form表单提交代码实例
Apr 29 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
PHP无限分类(树形类)的深入分析
2013/06/02 PHP
PHP获取一个字符串中间一部分字符的方法
2014/08/19 PHP
PHP获取Exif缩略图的方法
2015/07/13 PHP
JQUERY THICKBOX弹出层插件
2008/08/30 Javascript
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
js replace正则表达式应用案例讲解
2013/01/17 Javascript
css样式标签和js语法属性区别
2013/11/06 Javascript
jquery基础教程之deferred对象使用方法
2014/01/22 Javascript
Javascript this 关键字 详解
2014/10/22 Javascript
Jquery简单实现GridView行高亮的方法
2015/06/15 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
跟我学习javascript解决异步编程异常方案
2015/11/23 Javascript
JavaScript常用基础知识强化学习
2015/12/09 Javascript
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
2016/11/29 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
微信小程序按钮去除边框线分享页面功能
2018/08/27 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
深入探讨JavaScript的最基本部分之执行上下文
2019/02/12 Javascript
vue component 中引入less文件报错 Module build failed
2019/04/17 Javascript
py2exe 编译ico图标的代码
2013/03/08 Python
python字符串连接方式汇总
2014/08/21 Python
Python中列表和元组的使用方法和区别详解
2020/12/30 Python
Python脚本获取操作系统版本信息
2016/12/17 Python
Django2.1.3 中间件使用详解
2018/11/26 Python
Opencv+Python 色彩通道拆分及合并的示例
2018/12/08 Python
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
HTML5 Canvas概述
2009/08/26 HTML / CSS
新西兰便宜隐形眼镜购买网站:QUICKLENS New Zealand
2019/03/02 全球购物
耐克奥地利官网:Nike奥地利
2019/08/16 全球购物
信用社实习人员自我鉴定
2013/09/20 职场文书
2015年安全工作总结范文
2015/04/02 职场文书
2016年小学生寒假家长评语
2015/10/10 职场文书
多线程Spring通过@Scheduled实现定时任务
2022/05/25 Java/Android