微信小程序开发之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或css实现滚动广告的几种方案
Jan 28 Javascript
JS拖动技术 关于setCapture使用
Dec 09 Javascript
php+js实现倒计时功能
Jun 02 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
Oct 29 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 Javascript
Webpack 实现 Node.js 代码热替换
Oct 22 Javascript
浅析javascript函数表达式
Feb 10 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
Dec 28 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 Javascript
Vue 2.0 侦听器 watch属性代码详解
Jun 19 Javascript
微信小程序tabBar设置实例解析
Nov 14 Javascript
Vue指令实现OutClick的示例
Nov 16 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
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
php设计模式 Singleton(单例模式)
2011/06/26 PHP
php实现购物车功能(下)
2016/01/05 PHP
ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法
2016/11/12 PHP
PHP常见数组排序方法小结
2018/08/20 PHP
Javascript条件判断使用小技巧总结
2008/09/08 Javascript
不要在cookie中使用特殊字符的原因分析
2010/07/13 Javascript
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
Script的加载方法小结
2011/01/12 Javascript
js css 实现遮罩层覆盖其他页面元素附图
2014/09/22 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
JS限制文本框只能输入数字和字母方法
2015/02/28 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
2015/12/17 Javascript
JS图片放大效果简单实现代码
2016/09/08 Javascript
用jquery获取自定义的标签属性的值简单实例
2016/09/17 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
2017/06/12 Javascript
解决vue打包后刷新页面报错:Unexpected token
2019/08/27 Javascript
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
用实例详解Python中的Django框架中prefetch_related()函数对数据库查询的优化
2015/04/01 Python
Numpy数据类型转换astype,dtype的方法
2018/06/09 Python
Python Selenium 之关闭窗口close与quit的方法
2019/02/13 Python
python实现中文文本分句的例子
2019/07/15 Python
tensorflow生成多个tfrecord文件实例
2020/02/17 Python
Python多线程操作之互斥锁、递归锁、信号量、事件实例详解
2020/03/24 Python
Python 数据的累加与统计的示例代码
2020/08/03 Python
HTML中fieldset标签概述及使用方法
2013/02/01 HTML / CSS
分享全球十款超强HTML5开发工具
2014/05/14 HTML / CSS
HTML5 body设置全屏背景图片的示例代码
2020/12/08 HTML / CSS
美国现代家具网站:Design Within Reach
2018/07/19 全球购物
品学兼优的大学生自我评价
2013/09/20 职场文书
测绘工程个人的自我评价
2013/11/23 职场文书
打架检讨书
2015/01/27 职场文书
年终工作总结范文
2019/06/20 职场文书
大学毕业生自我鉴定范文
2019/06/21 职场文书