微信小程序地图开发详解

发布时间:2023-05-18

微信小程序是近年来发展较快的新型产品,提供了许多丰富的功能。其中,地图开发是一个重要的方向之一。本篇文章将通过多个方面详细介绍微信小程序地图的开发,包含教程、价格、属性、组件、标记显示、三个点等方面。

一、微信小程序map使用教程

微信小程序中,map组件提供了使用地图的能力。以下是map的页面结构:

<map id="map" longitude="116.400244" latitude="39.92556" scale="14" markers="{{markers}}" show-location="true" polyline="{{polyline}}" include-points="{{includePoints}}" bindtap="bindViewTap" style="width: 100%; height: 300px;"></map>

其中:

  • longitudelatitude分别代表地图的经度和纬度;
  • scale为地图的缩放级别;
  • markers为标记点;
  • show-location代表是否显示用户当前位置;
  • polyline为连线坐标点;
  • include-points代表地图的中心和缩放级别包括所有的坐标点。

二、微信小程序的价格

微信小程序map功能是免费的,但使用高德地图API需要支付一定的费用。高德地图API的费用根据不同的用途和使用频率而定,可以在高德地图官网查看具体的价格方案。

三、微信小程序map属性

map组件提供了许多属性,以满足不同的需求。以下是一些常用的属性:

  1. longitude:地图中心的经度;
  2. latitude:地图中心的纬度;
  3. scale:缩放级别,取值范围为5~18;
  4. markers:标记点;
  5. show-location:是否显示用户当前位置;
  6. polyline:连线坐标点;
  7. include-points:地图的中心和缩放级别包括所有的坐标点。

四、微信小程序map组件

map组件提供了丰富的功能,比如显示地图上的标记点、连线、移动位置等。以下是一些常用的map组件:

  1. markers:标记点可以是图片、文本、自定义内容等;
  2. polyline:连线可以连接多个坐标点;
  3. controls:支持添加自定义控件,如缩放按钮等;
  4. circles:支持在地图上显示圆形区域。

五、微信小程序map显示所有标记

地图上的标记点是非常重要的一部分,显示所有标记点的方法如下:

// 获取map组件实例
var mapCtx = wx.createMapContext('map');
// 标记点自适应地图显示
mapCtx.includePoints({
  padding: [10],
  points: this.data.markers
})

其中:

  • padding为标记点与地图边缘的距离;
  • points为标记点集合。

六、微信小程序map三个点

map组件提供了三个点,分别为地图的中心点(center)、手指触摸的点(tap)和用户位置点(gcj02)。以下是获取三个点的方法:

// 获取map组件实例
var mapCtx = wx.createMapContext('map');
// 获取中心点坐标
mapCtx.getCenterLocation({
  success: function(res){
    console.log(res.longitude)
    console.log(res.latitude)
  }
})
// 获取手指触摸的点的坐标
mapCtx.getRegion({
  success: function(res){
    console.log(res.northeast)
    console.log(res.southwest)
  }
})
// 获取用户位置
wx.getLocation({
  type: 'gcj02',
  success: function(res) {
    console.log(res)
  },
})

七、微信小程序map怎么设置

地图的设置可以通过在map组件中传入属性来实现。以下是一些常用的设置:

<map id="map" longitude="116.400244" latitude="39.92556" scale="14" markers="{{markers}}" show-location="true" polyline="{{polyline}}" include-points="{{includePoints}}" bindtap="bindViewTap" style="width: 100%; height: 300px;"></map>

在这里可以修改地图的经度、纬度、缩放级别、标记点、用户位置等等。

八、微信小程序map实例

以下是一个完整的小程序map实例,实现了标记点、连线、自定义控件等功能。

<view class="container">
  <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="{{scale}}" markers="{{markers}}" polyline="{{polyline}}" show-location="{{true}}" bindmarkertap="markertap" bindcontroltap="controltap" bindregionchange="regionchange"></map>
</view>
Page({
  data: {
    longitude: 121.322188,
    latitude: 31.093128,
    scale: 16,
    markers: [{
      iconPath: "/resources/others.png",
      id: 0,
      latitude: 31.093128,
      longitude: 121.322188,
      width: 50,
      height: 50,
      callout: {
        content: "MyLocation",
        color: "#000",
        fontSize: 20,
        borderRadius: 10,
        bgColor: "#fff",
        padding: 10,
        display: "BYCLICK"
      }
    }],
    polyline: [{
      points: [
        { longitude: 121.322188, latitude: 31.093128 },
        { longitude: 121.31952, latitude: 31.08982 }
      ],
      color: "#FF0000DD",
      width: 2,
      dottedLine: true,
      arrowLine: true,
      borderColor: "#000",
      borderWidth: 1
    }],
    controls: [{
      id: 1,
      iconPath: '/resources/zoomin_controls.png',
      position: {
        left: 10,
        top: 10,
        width: 40,
        height: 40
      },
      clickable: true
    }, {
      id: 2,
      iconPath: '/resources/zoomout_controls.png',
      position: {
        left: 10,
        top: 60,
        width: 40,
        height: 40
      },
      clickable: true
    }]
  },
  regionchange(e) {
    console.log(e.type)
  },
  controltap(e) {
    console.log(e.controlId)
  },
  markertap(e) {
    console.log(e.markerId)
  }
})

九、微信小程序map控件

map组件支持添加自定义控件,用于实现更多的功能。以下是一些常用的自定义控件:

controls:[{
  id: 1,
  iconPath: '/resources/zoomin_controls.png',
  position: {
    left: 10,
    top: 10,
    width: 40,
    height: 40
  },
  clickable: true
}, {
  id: 2,
  iconPath: '/resources/zoomout_controls.png',
  position: {
    left: 10,
    top: 60,
    width: 40,
    height: 40
  },
  clickable: true
}]

其中:

  • id为控件的唯一标识;
  • iconPath为控件的图标;
  • position为控件在地图中的位置;
  • clickable为是否可点击。

十、微信小程序map组件有什么用

微信小程序map组件具有丰富的功能,可以用于实现各种地图相关应用,比如地图导航、地理信息查询、地点周边搜索等。通过对微信小程序map的使用和掌握,可以使开发者更好地应对各种地图应用的需求,提高开发效率和用户体验。 以上是关于微信小程序map的详细介绍,包括使用教程、价格、属性、组件、标记显示、三个点、设置、实例、控件和使用场景等。希望本文能够对大家学习和使用微信小程序map有所帮助。