微信小程序开发之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里的条件判断
Feb 27 Javascript
jquery图片上下tab切换效果
Mar 18 Javascript
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
jquery $.each() 使用小探
Aug 23 Javascript
基于javascript实现图片懒加载
Jan 05 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
Jan 20 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
Mar 23 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
Apr 07 Javascript
JavaScript生成指定范围的时间列表
Mar 19 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
Sep 29 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
Aug 24 Javascript
vue将文件/图片批量打包下载zip的教程
Oct 21 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 编写的日历
2006/10/09 PHP
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
2021/03/09 Javascript
优化javascript的执行速度
2010/01/23 Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
2010/05/17 Javascript
jquery 列表双向选择器之改进版
2013/08/09 Javascript
js实现类似jquery里animate动画效果的方法
2015/04/10 Javascript
浅谈JavaScript中的字符编码转换问题
2015/07/07 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
2015/11/26 Javascript
AngularJS模块详解及示例代码
2016/08/17 Javascript
jquery对所有input type=text的控件赋值实现方法
2016/12/02 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
2018/11/12 jQuery
vue图片上传本地预览组件使用详解
2019/02/20 Javascript
在小程序中推送模板消息的实现方法
2019/07/22 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
2020/04/07 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
Vue 数据绑定的原理分析
2020/11/16 Javascript
[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan
2014/07/15 DOTA
python进阶教程之循环对象
2014/08/30 Python
python通过文本在一个图中画多条线的实例
2020/02/21 Python
通过Python实现Payload分离免杀过程详解
2020/07/13 Python
python使用Windows的wmic命令监控文件运行状况,如有异常发送邮件报警
2021/01/30 Python
前端canvas水印快速制作(附完整代码)
2019/09/19 HTML / CSS
HTML5新特性之语义化标签
2017/10/31 HTML / CSS
大三在校生电子商务求职信
2013/10/29 职场文书
个人职业生涯规划书1500字
2013/12/31 职场文书
调研汇报材料范文
2014/08/17 职场文书
颂军魂爱军营演讲稿
2014/09/13 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
秦兵马俑导游词
2015/02/02 职场文书
英语导游欢迎词
2015/09/30 职场文书
遇事可以测出您的见识与格局
2019/09/16 职场文书
深入理解redis中multi与pipeline
2021/06/02 Redis
使用 Apache 反向代理的设置技巧
2022/01/18 Servers