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

更新时间：2017年06月08日 14:21:22 作者：何东_hd

相信大家现在都知道微信小程序吧，下面这篇文章主要给大家介绍了微信小程序开发之map地图的相关资料，分享出来供大家参考学习，文中通过示例代码介绍的非常详细，需要的朋友们下面跟着小编来一起学习学习吧。

前言

微信小程序地图操作比较简单，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属性太多，先看一下：

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

下面一一看一下，我们先看效果图吧，先看真相：

这里我只用了一个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：

注意看示例图的右上角，有两个按钮，加减号，是控制地图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图：

最后上一下具体代码：

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 addBookmark 加入收藏多浏览器兼容
不错的加入收藏代码，加入了对一些常见浏览器的判断，更好的体现用户体验，兼容了ie,firefox.
2009-08-08
一文详解最常见的六种跨域解决方案
跨域问题的本质是浏览器为了保证用户的一种安全拦截机制,想要解决跨域问题,只需要告诉浏览器"我是自己人,不要拦我"就行,下面这篇文章主要给大家介绍了关于最常见的六种跨域解决方案的相关资料,需要的朋友可以参考下
2023-04-04
微信小程序实现modal弹出框遮罩层组件（可带文本框）
这篇文章主要给大家介绍了关于微信小程序实现modal弹出框遮罩层组件（可带文本框）的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-12-12
js实现动态时钟
这篇文章主要为大家详细介绍了js实现动态时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-03-03
socket在egg中的使用实例代码详解
这篇文章主要介绍了socket在egg中的使用，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
2019-05-05
JavaScript实现拖拽功能
这篇文章主要为大家详细介绍了JavaScript实现拖拽功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-02-02
JavaScript函数式编程实现介绍
函数式编程是一种编程范式,将整个程序都由函数调用以及函数组合构成。可以看成一条流水线,数据可以不断地从一个函数的输出流入另一个函数的输入,最后输出结果
2022-09-09
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
GoogleCode可以作为免费的稳定的静态资源空间来使用,比如JQuery的文档就在上面
2009-05-05
js实现浏览器的各种菜单命令比如打印、查看源文件等等
浏览器的各种菜单命令比如打印、查看源文件、加入收藏等等，这些在js中时完全可以实现的，本文搜集整理了一些，感兴趣的朋友可以参考下
2013-10-10
layui中的tab控件点击切换触发事件
这篇文章主要介绍了layui中的tab控件点击切换触发事件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06