1. Python技术站首页
  2. 其他
  3. JavaScript

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

• JavaScript
yizhihongxing

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

一、前期准备

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插件，根据输入的起点和终点返回两点之间的路线，并将路线信息添加到地图上。

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

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

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • JavaScript中利用Array filter() 方法压缩稀疏数组

    当数组中存在大量空值时，压缩稀疏数组可以有效地节省存储空间和提高访问效率。在JavaScript中，可以利用Array filter() 方法来对稀疏数组进行压缩。 什么是稀疏数组？ 稀疏数组是指数组中有很多空值(null，undefined或者长度为0的数组元素)的情况。例如，下面的数组就是一个稀疏数组。 const sparseArray = [1, ,…

    JavaScript 2023年5月27日
    00

  • 全面了解JavaScript对象进阶

    全面了解JavaScript对象进阶 了解对象介绍 JavaScript 是通过对象来组织数据和功能的，可以认为在 JavaScript 中我们所有的一切都是对象，也就是说你定义的任何变量或函数都是对象。对象可以由两种方法创建：1. 直接量2. 构造函数 对象直接量 对象直接量是由若干名/值对组成的映射表，用大括号括起来。然后在每个名/值对之间用逗号分隔即可…

    JavaScript 2023年5月18日
    00

  • 一文彻底搞懂Vue的MVVM响应式原理

    一文彻底搞懂Vue的MVVM响应式原理 了解Vue.js Vue.js 是一个渐进式JavaScript框架，它采用 MVVM（Model-View-ViewModel）模式进行构建。其中 ViewModel 是 Vue.js 主要的核心，Vue.js 的响应式也是建立在 ViewModel 上的。 Vue.js 的响应式原理 Vue.js 的响应式原理是基…

    JavaScript 2023年6月10日
    00

  • JavaScript基于扩展String实现替换字符串中index处字符的方法

    要基于扩展String实现替换字符串中index处字符的方法，需要使用JavaScript原型链进行扩展。具体步骤如下： 利用Object.defineProperty()方法，为String.prototype对象添加一个名为replaceCharAtIndex的新属性。 Object.defineProperty(String.prototype, ‘r…

    JavaScript 2023年5月28日
    00

  • BOM之navigator对象和用户代理检测

    BOM指的是浏览器对象模型（Browser Object Model），是由浏览器厂商提供的一组API接口，用于JavaScript与浏览器交互，包括DOM、window对象、navigator对象等。其中，navigator对象用于获取有关浏览器的信息，用户代理检测可以通过这个对象获取当前浏览器的信息。 navigator对象 navigator对象提供了…

    JavaScript 2023年6月10日
    00

  • JavaScript中的6种运算符总结

    JavaScript中有很多种运算符用于执行不同类型的操作。在本篇攻略中，我们将会探讨JavaScript中的6种主要运算符。 1. 算术运算符 算术运算符用于执行数学运算，如加、减、乘、除。其中最常见的运算符有 +、-、*、/、%。 示例1：加法运算符（+） let a = 5; let b = 7; let c = a + b; console.log(…

    JavaScript 2023年5月28日
    00

  • javascript 事件处理程序介绍

    JavaScript 事件处理程序介绍 在 JavaScript 中，事件处理程序是处理在页面中发生的事件的功能代码。当用户在页面上进行操作时，比如单击一个按钮或是按下一个键盘按键，这些事件将被浏览器捕获，然后触发相应的事件处理程序。 事件处理程序的绑定方式 1. HTML事件处理程序 在HTML标签中直接在属性中绑定事件处理程序。 <button o…

    JavaScript 2023年5月28日
    00

  • JS实现网页标题栏显示当前时间和日期的完整代码

    下面我为你讲解一下 JS 实现网页标题栏显示当前时间和日期的完整代码攻略。 首先，我们需要了解两个 Javascript 方法：setInterval() 和 toLocaleTimeString()。 setInterval() 方法会以指定的时间间隔（以毫秒为单位）重复调用某个函数。可用于创建定期执行的函数（也称为时间间隔函数）。 toLocaleTim…

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