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

下面我将详细讲解使用微信小程序内地图的操作步骤和注意事项,以及两条示例说明。

一、前期准备

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为地图组件的唯一标识符,latitudelongitude分别为地图初始化时的中心点坐标,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.GeocoderAMap.Driving插件,根据输入的起点和终点返回两点之间的路线,并将路线信息添加到地图上。

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

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:一次微信小程序内地图的使用实战记录 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • uniapp小程序使用高德地图api实现路线规划的示例代码

    下面我将给出使用高德地图API实现路线规划的示例代码的详细攻略。 步骤: 获取高德地图API的Key 首先,在使用高德地图API之前,需要先获取高德地图API的Key。具体获取方式可以参考高德地图API官方文档:https://lbs.amap.com/api/webservice/guide/create-project/get-key 引入高德地图Jav…

    JavaScript 2023年6月11日
    00
  • javascript获取时间戳的5种方法详解

    JavaScript获取时间戳的5种方法详解 时间戳是指一个时间点与1970年1月1日的间隔时间,通常是表示 Unix 时间或 POSIX 时间,可以用于表示距离某一时间点的时间差。获取时间戳在 JavaScript 开发中是一个比较常见的需求,下面将详细介绍获取时间戳的 5 种方法。 方法一:使用JS内置Date对象的getTime方法 Date 对象的 …

    JavaScript 2023年5月27日
    00
  • html下载本地

    要将HTML文件下载到本地,我们可以使用以下两种方法: 方法一:右键另存为(Save As) 这是最简单的方法,只需右键点击正在浏览的HTML页面,选择“另存为”或“Save As”,然后指定下载路径和文件名即可。 请注意,如果这个HTML页面包含CSS、JavaScript或图像等外部文件,则需要将这些文件一同下载到本地,并确保它们在同一文件夹内或者正确链…

    JavaScript 2023年5月27日
    00
  • js事件监听器用法实例详解

    下面是“js事件监听器用法实例详解”的攻略: 什么是事件监听器? 事件监听器(Event Listener)是一种常用的 JavaScript 技术,它用来监听特定元素(如 DOM 元素)上的特定事件(如单击、滚动、鼠标移动、键盘按键等),并在事件发生时触发执行指定的回调函数。这种技术可以实现 Web 页面上的交互效果,比如:按钮单击后弹出框、下拉菜单、图片…

    JavaScript 2023年6月10日
    00
  • java 最新Xss攻击与防护(全方位360°详解)

    Java 最新Xss攻击与防护(全方位360°详解)攻略 什么是XSS攻击 XSS攻击是指攻击者向有漏洞的Web页面中插入恶意的代码(比如脚本),当用户浏览该页面时,攻击代码会被执行,从而实现攻击者想要的攻击目的。 XSS攻击的类型 XSS攻击的类型可以分为以下几类: 反射型XSS:注入的脚本在请求URL参数中,并将脚本注入到返回的响应中,被用户浏览器解析执…

    JavaScript 2023年6月11日
    00
  • jQuery Tools tab(幻灯片)

    下面是jQuery Tools tab(幻灯片)的完整攻略。 什么是jQuery Tools tab(幻灯片) jQuery Tools tab是一个基于jQuery的选项卡插件,可以通过点击选项卡来切换不同的内容页面。除此之外,还可以通过添加一些特效来改变选项卡的样式和显示方式。 如何使用jQuery Tools tab 引入jQuery库和jQuery …

    JavaScript 2023年6月11日
    00
  • Javascript Math ceil()、floor()、round()三个函数的区别

    当我们需要将浮点数向上或向下取整时,可以使用 Javascript 中的 Math 对象提供的 ceil()、floor() 和 round() 三个函数。它们的区别如下: Math.ceil() Math.ceil() 方法返回一个大于或等于所传入数字的最小整数,即向上取整。如果传入的是整数,则返回该整数本身。 示例: Math.ceil(4.3); //…

    JavaScript 2023年5月27日
    00
  • JavaScript 设计模式之洋葱模型原理及实践应用

    JavaScript 设计模式之洋葱模型原理及实践应用 什么是洋葱模型 洋葱模型是一种JavaScript设计模式,也被称为“拦截器模式”或“过滤器模式”。其原理是将多个操作分别封装在不同的层级中,从外到内形成一层层的管道,每个操作都可以在管道的中间处理数据,并将数据传递到下一层操作中。 在洋葱模型中,通常会使用一个回调函数作为管道的最后一层,它接收处理后的…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部