小程序怎么加入瓦片地图

要在小程序中使用瓦片地图，可以通过以下步骤：

1. 获取瓦片地图的 API Key：可以在瓦片地图提供商的网站上注册账号并创建一个新的 API Key。

2. 在小程序中引入瓦片地图的 JavaScript 库：可以使用第三方的瓦片地图库，如 Mapbox、Leaflet 等。将库文件下载到小程序中，并在需要使用瓦片地图的页面中引入。

3. 在小程序中添加地图容器：在需要显示瓦片地图的页面中添加一个容器（如 div 标签），设置容器的宽度和高度，并指定容器的 id。

4. 初始化地图：在页面的 JavaScript 代码中，使用瓦片地图库提供的 API，初始化地图对象，并将其绑定到地图容器上。

5. 添加地图图层：可以使用瓦片地图库提供的 API，添加各种类型的地图图层，如瓦片图层、标注点图层、矢量图层等。

例如，在使用 Mapbox 瓦片地图库时，可以按照以下代码示例实现：

（1）在小程序的 app.js 文件中引入 Mapbox 库：

import mapboxgl from 'mapbox-gl';

（2）在需要显示地图的页面的 js 文件中初始化地图对象：

let map = new mapboxgl.Map({
  container: 'map-container',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [lng, lat],
  zoom: 8,
  accessToken: 'your-access-token'
});

其中，container 指定地图容器的 id，style 指定地图的样式，center 指定地图的中心点坐标，zoom 指定地图的缩放级别，accessToken 是注册 Mapbox 账号后获取的 API Key。

（3）在页面的 wxml 文件中添加地图容器：

<view id="map-container" style="width: 100%; height: 400px;"></view>

（4）在页面的 wxss 文件中设置地图容器的样式：

#map-container {
  position: relative;
}

（5）在页面的 js 文件中添加地图图层：

map.on('load', function() {
  map.addLayer({
    'id': 'points',
    'type': 'symbol',
    'source': {
      'type': 'geojson',
      'data': {
        'type': 'FeatureCollection',
        'features': [{
          'type': 'Feature',
          'geometry': {
            'type': 'Point',
            'coordinates': [lng, lat]
          },
          'properties': {
            'title': 'Mapbox',
            'icon': 'monument'
          }
        }]
      }
    },
    'layout': {
      'icon-image': '{icon}-15',
      'text-field': '{title}',
      'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
      'text-offset': [0, 0.6],
      'text-anchor': 'top'
    }
  });
});

其中，on 方法用于监听地图加载完成事件，addLayer 方法用于添加地图图层，source 指定图层的数据源，layout 和 paint 用于设置图层的样式。

以上示例仅供参考，具体实现方式还需要根据具体的瓦片地图库进行调整。