一、前期准备

1. 开通小程序云开发环境

首先需要开通小程序云开发环境，可以参考微信官方文档进行操作。

2. 获取高德地图API Key

在使用高德地图之前，需要在高德开放平台上注册账号，并获取API Key。具体流程可以参考高德地图官方文档。

3. 安装必要的npm包

使用微信小程序地图，需要安装以下三个npm包：

微信小程序原生SDK：@tencent/map-wx-sdk
高德地图SDK：@amap/amap-jsapi-loader
geolib：geolib

可以通过以下命令安装：

npm install --production @tencent/map-wx-sdk @amap/amap-jsapi-loader geolib

完成上述步骤后，我们就可以开始操作了。

二、实现地图显示和标注

1. 创建地图

首先在wxml页面中创建一个地图组件，代码如下：

<map id="map" latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" />

其中，id为地图组件的唯一标识符，latitude和longitude分别为地图初始化时的中心点坐标，markers为标注点数组。

2. 初始化地图

接下来，在页面的js文件中初始化地图。具体步骤如下：

const amapFile = require('@amap/amap-jsapi-loader');

Page({
  data: {
    latitude: 39.90469,
    longitude: 116.40717,
    markers: [],
  },

  async onLoad() {
    // 获取高德地图API Key，注意替换YOUR_AMAP_API_KEY为自己的API Key。
    const apiKey = 'YOUR_AMAP_API_KEY';

    // 加载高德地图JSAPI
    const { AMap } = await amapFile.load({
      "key": apiKey,
      "version": "2.0",
      "plugins": [],
    });

    // 初始化地图
    const map = new AMap.Map('map', {
      zoom: 12,
      center: [this.data.longitude, this.data.latitude],
    });

    this.setData({
      map: map
    });
  },
});

在上面的代码中，我们首先从@amap/amap-jsapi-loader包中引入了AMap对象，然后通过new AMap.Map初始化地图，并将地图对象保存在页面数据中，以便之后的操作中使用。

3. 添加标注

最后，我们可以使用以下代码添加标注点：

const marker = new AMap.Marker({
  position: [longitude, latitude],
  icon: 'path/to/icon.png',
  title: '这是一个标注点',
});

this.data.map.add(marker);

this.setData({
  markers: [...this.data.markers, marker]
});

其中，position为标注点的经纬度坐标，icon为标注点的图标，title为标注点的标题。添加完标注点后，需要将标注点对象保存在页面数据中，并更新markers数据，以便在地图组件中显示出来。

三、综合应用示例

接下来，我将给出两个示例，分别演示地点搜索和路径规划功能。

1. 地点搜索

以下示例可以根据输入的地址，搜索该地址附近的餐馆，并在地图上显示出来。代码如下：

const amapFile = require('@amap/amap-jsapi-loader');
const geolib = require('geolib');

Page({
  data: {
    latitude: 0,
    longitude: 0,
    markers: [],
  },

  async onLoad() {
    const apiKey = 'YOUR_AMAP_API_KEY';

    const { AMap } = await amapFile.load({
      "key": apiKey,
      "version": "2.0",
      "plugins": [],
    });

    const map = new AMap.Map('map', {
      zoom: 12,
      center: [this.data.longitude, this.data.latitude],
    });

    // 输入地址查询附近的餐馆
    const p = new Promise((resolve, reject) => {
      AMap.service('AMap.PlaceSearch', {
        pageSize: 10,  // 最多返回多少条数据
        city: '北京市',
        extensions: 'all',
        map,
      }, (status, result) => {
        if (status === 'complete') {
          resolve(result.poiList.pois);
        } else {
          reject(result);
        }
      });
    });

    // 根据查询结果添加Marker
    const addMarkers = (pois) => {
      const markers = [];

      pois.forEach((poi) => {
        const marker = new AMap.Marker({
          position: [poi.location.lng, poi.location.lat],
          title: poi.name,
        });

        markers.push(marker);
      });

      this.setData({
        markers: markers,
      });
    };

    // 根据输入地址返回坐标
    const getCoord = (addr) => {
      return new Promise((resolve, reject) => {
        AMap.plugin('AMap.Geocoder', function() {
          const geocoder = new AMap.Geocoder({
            city: '北京市',
          });

          geocoder.getLocation(addr, function(status, result) {
            if (status === 'complete' && result.geocodes.length) {
              const location = result.geocodes[0].location;
              const { longitude, latitude } = location;

              resolve({ longitude, latitude });
            } else {
              reject(result);
            }
          });
        });
      });
    };

    // 等待地理编码完成后，调用输入地址查询附近餐馆的方法
    const searchNearby = async (addr) => {
      try {
        const coord = await getCoord(addr);
        this.setData({
          longitude: coord.longitude,
          latitude: coord.latitude,
        })

        map.setZoomAndCenter(14, [coord.longitude, coord.latitude]);

        const pois = await p;
        addMarkers(pois);
      } catch (e) {
        console.error(e);
      }
    };

    // 示例调用
    searchNearby('北京市朝阳区');
  },
});

在上述示例中，我们使用了高德地图的AMap.PlaceSearch插件，根据输入的地址返回附近的餐馆，并将餐馆的位置信息添加到地图上。

2. 路径规划

以下示例可以根据起点和终点，规划出两点之间的路线，并在地图上显示出来。代码如下：

const amapFile = require('@amap/amap-jsapi-loader');
const geolib = require('geolib');

Page({
  data: {
    latitude: 0,
    longitude: 0,
    markers: [],
  },

  async onLoad() {
    const apiKey = 'YOUR_AMAP_API_KEY';

    const { AMap } = await amapFile.load({
      "key": apiKey,
      "version": "2.0",
      "plugins": [],
    });

    const map = new AMap.Map('map', {
      zoom: 12,
      center: [this.data.longitude, this.data.latitude],
    });

    // 根据起点和终点查询路线
    const searchPath = (start, end) => {
      return new Promise((resolve, reject) => {
        // 根据地址查询坐标，完成后再根据坐标查询路线
        AMap.plugin('AMap.Geocoder', function() {
          const geocoder = new AMap.Geocoder({
            city: '北京市',
          });

          Promise.all([geocoder.getLocation(start), geocoder.getLocation(end)])
            .then((locations) => {
              const [startLoc, endLoc] = locations;
              const path = new AMap.Driving({
                policy: AMap.DrivingPolicy.LEAST_TIME,
                extensions: 'base',
                map,
              });
              const startLngLat = new AMap.LngLat(startLoc.longitude, startLoc.latitude);
              const endLngLat = new AMap.LngLat(endLoc.longitude, endLoc.latitude);
              path.search(startLngLat, endLngLat, (status, result) => {
                if (status === 'complete' && result.routes && result.routes.length) {
                  resolve(result.routes[0].path);
                } else {
                  reject(result);
                }
              });
            })
            .catch((e) => {
              reject(e);
            })
        });
      });
    };

    // 将路径信息添加到地图上
    const addPath = (path) => {
      const markers = [];
      const polylines = [];

      path.forEach((p, index) => {
        if (index === 0 || index === path.length - 1) {
          // 添加起点和终点标记
          const marker = new AMap.Marker({
            position: [p.lng, p.lat],
            icon: `https://webapi.amap.com/theme/v1.3/markers/n/start.png`,
          });

          markers.push(marker);
        } else {
          // 添加步行路线
          const prev = path[index - 1];
          const distance = geolib.getDistance({ longitude: prev.lng, latitude: prev.lat }, { longitude: p.lng, latitude: p.lat });
          if (distance > 50) {
            const polyline = new AMap.Polyline({
              path: [prev, p],
              extData: {
                distance: distance,
              },
              strokeColor: "#0091FF",
              strokeWeight: 6,
              strokeOpacity: 1,
              strokeStyle: "solid",
            });

            polylines.push(polyline);
          }
        }
      });

      map.add(markers.concat(polylines));
    };

    // 示例调用
    searchPath('北京站', '天安门')
      .then((path) => {
        this.setData({
          longitude: path[0].lng,
          latitude: path[0].lat,
        });

        map.setZoomAndCenter(13, [path[0].lng, path[0].lat]);

        addPath(path);
      })
      .catch((e) => {
        console.error(e);
      });
  },
});

在上述示例中，我们使用了高德地图的AMap.Geocoder和AMap.Driving插件，根据输入的起点和终点返回两点之间的路线，并将路线信息添加到地图上。

以上就是关于使用微信小程序内地图的一些实战记录，希望对您有所帮助。

本文链接：http://task.lmcjl.com/news/11537.html

展开阅读全文

上一篇：RabbitMQ如何删除队列中的消息下一篇：Linux路径跟踪命令：详细讲解tracert命令

热门文章排行

推荐文章

关键词

一次微信小程序内地图的使用实战记录