微信小程序开发之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框架
Aug 13 Javascript
Egret引擎开发指南之视觉编程
Sep 03 Javascript
在linux中使用包管理器安装node.js
Mar 13 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
Sep 15 Javascript
JS区分浏览器页面是刷新还是关闭
Apr 17 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
May 26 Javascript
微信小程序 弹框和模态框实现代码
Mar 10 Javascript
JS实现商品筛选功能
Aug 19 Javascript
详解ES6中的代理模式——Proxy
Jan 08 Javascript
JavaScript继承的特性与实践应用深入详解
Dec 30 Javascript
jQuery中DOM常见操作实例小结
Aug 01 jQuery
利用PHP实现递归删除链表元素的方法示例
Oct 23 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如何调用webservice应用介绍
2012/11/24 PHP
PHP实现生成透明背景的PNG缩略图函数分享
2014/07/08 PHP
ThinkPHP 404页面的设置方法
2015/01/14 PHP
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
2010/03/23 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
2010/12/25 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
通过$(this)使用jQuery包装后的方法或属性
2014/05/18 Javascript
关闭页面window.location事件未执行的原因及解决方法
2014/09/01 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
JQuery标签页效果的两个实例讲解(4)
2015/09/17 Javascript
jquery插件uploadify实现带进度条的文件批量上传
2015/12/13 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
2016/12/28 Javascript
详解Angular2中Input和Output用法及示例
2017/05/21 Javascript
ES6新特性:使用export和import实现模块化详解
2017/07/31 Javascript
jQuery实现轮播图及其原理详解
2020/04/12 jQuery
electron-vue利用webpack打包实现多页面的入口文件问题
2019/05/12 Javascript
Js on及addEventListener原理用法区别解析
2020/07/11 Javascript
Pandas:DataFrame对象的基础操作方法
2018/06/07 Python
Python实现朴素贝叶斯分类器的方法详解
2018/07/04 Python
python3结合openpyxl库实现excel操作的实例代码
2018/09/11 Python
python钉钉机器人运维脚本监控实例
2019/02/20 Python
python+pyqt5实现图片批量缩放工具
2019/03/18 Python
python按键按住不放持续响应的实例代码
2019/07/17 Python
使用pip安装python库的多种方式
2019/07/31 Python
python将邻接矩阵输出成图的实现
2019/11/21 Python
CSS3实现多样的边框效果
2018/05/04 HTML / CSS
html5组织内容_动力节点Java学院整理
2017/07/10 HTML / CSS
MaBelle玛贝尔香港官网:香港钻饰连锁店
2019/09/09 全球购物
销售找工作求职信
2013/12/20 职场文书
网络维护中文求职信
2014/01/03 职场文书
村主任群众路线个人对照检查材料
2014/09/26 职场文书
成本会计实训报告
2014/11/05 职场文书
2014年银行员工工作总结
2014/11/12 职场文书
五一晚会主持词
2015/07/01 职场文书
导游词之麻姑仙境
2019/11/18 职场文书