您当前的位置: 首页 > 知识百科 > 微信小程序地图功能怎么开发?

微信小程序地图功能怎么开发?

时间:2023-07-01 14:05 阅读数:40 人阅读 分类:知识百科

  微信小程序地图功能怎么开发?在开发微信小程序的过程中是无法避免开发微信小程序地图功能的,尤其是微信小程序商店,必须要开发微信小程序地图功能,微信小程序地图功能怎么开发?

  在接下来内容小编主要介绍微信小程序中的地图模块相关功能。

  微信小程序地图功能基本使用:

  地图组件使用起来也很简单。参数列表及说明如下:

  

  除了显示基本地图,还可以在地图上添加markers–标注,polyline–折线,circles–圆形,controls–控件。

  markers

  

  data: {

  //

  markers: [{

  iconPath: "../../img/marker_red.png",

  id: 0,

  latitude: 40.002607,

  longitude: 116.487847,

  width: 35,

  height: 45

  }],

  ... //省略小程序代码

  }123456789101112

  在data中定义markers变量来表示覆盖物

  然后map控件引入即可.

  效果如下:

  

  data: {

  polyline: [{

  points: [{

  longitude: '116.481451',

  latitude: '40.006822'

  }, {

  longitude: '116.487847',

  latitude: '40.002607'

  }, {

  longitude: '116.496507',

  latitude: '40.006103'

  }],

  color: "#FF0000DD",

  width: 3,

  dottedLine: true

  }],

  //省略代码

  }

  123456789101112131415161718192021

  1

  circles

  

  data: {

  circles: [{

  latitude: '40.007153',

  longitude: '116.491081',

  color: '#FF0000DD',

  fillColor: '#7cb5ec88',

  radius: 400,

  strokeWidth: 2

  }],

  ... //省略代码

  }

  controls: [{

  id: 1,

  iconPath: '../../img/marker_yellow.png',

  position: {

  left: 0,

  top: 300 - 50,

  width: 50,

  height: 50

  },

  clickable: true

  }]1234567891011

  1

  control点击事件如下:

  controltap: function (e) {

  console.log(e.controlId);

  },

  其实可以通过在map上添加一个小程序按钮,来实现诸如:定位、状态返回等操作。

  (直接通过布局文件在map上添加view是显示不出来的)

  绑定事件

  

  关于经纬度,官方文档上都写的是Number类型。但是通过IDE调试的时候,写成字符串也是可以的。但是在IOS真机上运行时,markers却显示不出来,也不报错。

  后来自己对照属*的类型,发现后台传来的经纬度是字符串类型的。而字符串类型的经纬度在IOS真机上经测试就是显示不出来。

  所以将字符串转成Number类型即可。

  微信小程序地图功能怎么开发?以上就是微信小程序地图功能开发的全部内容了,各位微信小程序开发者,相信以上小编整理的内容对您开发微信小程序一定会有帮助的,大家请多关注微小乔。

相关推荐:

微信小程序卫星地图开发实例

微信小程序地图导航,景区地图导航应用微信小程序

微信小程序导航地图开发实例