微信小程序计算两点及多点间的距离+选择地图定位

最新推荐文章于 2024-05-26 19:17:37 发布

一只泰迪熊

最新推荐文章于 2024-05-26 19:17:37 发布

阅读量6.1k

点赞数 4

分类专栏：小程序定位距离地图文章标签：小程序 php 定位

本文链接：https://blog.csdn.net/qq_34913864/article/details/121669254

版权

本文基于腾讯地图开发文档实现此功能

1.首先去腾讯地图开发平台注册，申请自己的应用空间，严格按照以下步骤走完
在这里插入图片描述

在这里插入图片描述
2.把下载的两个sdk包，放在小程序utils

3.接下来就可以正常使用了
++++++++++++++++++++++++++++++分割线++++++++++++++++++++++++++++++++
3.1功能之一（这是计算多点距离）

wxml

<form bindsubmit="formSubmitone">
    <label>终点坐标:
    <input style="border:1px solid #000;" name="dest"></input>
    </label>
    <!--提交表单数据-->
    <button form-type="submit">计算距离</button>
</form>
<!--渲染起点经纬度到终点经纬度距离，单位为米-->
<view wx:for="{
   {distance}}" wx:key="index">
    <view>起点到终点的步行距离为{
   {
   item}}米</view>
</view>

 // 引入SDK核心类
  var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');

  // 实例化API核心类
  var qqmapsdk = new QQMapWX({
   
    key: '填写自己的' // 必填
  })

  Page({
   
    /**
     * 页面的初始数据
     */
    data: {
   

    },

    //触发表单提交事件，调用接口
    formSubmitone(e) {
   
      console.log(e);
      var _this = this;
      qqmapsdk.geocoder({
   
        address: e.detail.value.dest, //传入地址（  address: '北京故宫', ）
        success: function (res) {
   
          console.log(res);
          var path