高德地图实现-微信小程序地图导航

简介: 高德地图实现-微信小程序地图导航

效果图:

一、准备阶段

  • 1、在高德开放平台注册成为开发者
  • 2、申请开发者密钥(key)。
  • 3、下载并解压高德地图微信小程序SDK

高德开放平台:

注册账号(https://lbs.amap.com/)) 申请小程序应用的 key

应用管理(https://console.amap.com/dev/key/app)) -> 我的应用 -> 创建新应用


生成的 key 即可用在程序中

  • 下载相关 sdk 文件,导入 amap-wx.js 到项目中:https://lbs.amap.com/api/wx/download

微信小程序:

1.在创建的项目中,新建一个名为 libs 目录,将 amap-wx.js (amap-wx.js 从相关下载页面下载的 zip 文件解压后得到)文件拷贝到 libs 的本地目录下,如下图所示。

2.设置小程序安全通讯域名,为了保证高德小程序 SDK 中提供的功能的正常使用,需要设置安全域名。

登录微信公众平台,在 “设置”->“开发设置” 中设置 request 合法域名,将 https://restapi.amap.com 中添加进去,如下图所示:

  1. app.json中加入
"permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示",
      "dowload": "您的文件访问权限用于打开文件"
    }

  },

在你需要引用地图的页面的js文件中引入 amap-wx.js 文件。

var amapFile = require('../../../libs/amap-wx.130'); //如:..­/..­/libs/amap-wx.js

完整代码


// pages/map/map-container/map-container.js
import {
  baipaoGps
} from "../../../utils/api/car.js";
//百度地图
var bmap = require('../../../libs/bmap-wx.min.js');
//高德地图
var amapFile = require('../../../libs/amap-wx.130');
Page({
  data: {
    longitude: 117.3590007750093, //经度
    latitude: 22.846911841310202, //维度
    scale: 17, //地图默认缩放等级
    showModal: false, //弹框显隐
    modalData: {}, //详情信息
    G: {
      pi: 3.141592653589793,
      a: 6378245,
      ee: .006693421622965943,
      x_pi: 52.35987755982988
    },
    licence: '', //车牌号
    markers: [], //点位数据
    gpsInfo: {}, //定位数据
  },

  onLoad: function (options) {
    if (options) {
      if (options.gpsInfo) {
        const decodedGpsInfo = decodeURIComponent(options.gpsInfo);
        const gpsInfo = JSON.parse(decodedGpsInfo);

        if (gpsInfo.type === '2') {
          // // 创建百度地图实例
          const BaiDuMap = new bmap.AMapWX({
            key: '', // 你的高德地图API Key
          });
        } else if (gpsInfo.type === '2') {
          // 创建高德地图实例
          const myAmapFun = new amapFile.AMapWX({
            key: '', // 你的高德地图API Key
          });
        }
        this.data.markers.push(gpsInfo);
        this.setData({
          markers: this.data.markers
        });
        // //初始化地图
        // this.mapCtx = wx.createMapContext('map');
        this.loadMarkers();
      }

    } else {
      wx.showToast({
        title: '车牌号为空',
        icon: 'none'
      })
    }
  },

  loadMarkers: function () {
    //生成 markers 列表,用于在地图上展示
    let markersData = this.data.markers.map(marker => {
      // console.log(marker)
      var a = this.transfor2Mars(Number(marker.lat), Number(marker.lng));
      return {
        id: Number(marker.id),
        longitude: a.Lng,
        latitude: a.Lat,
        vehNum: marker.licenseName,
        location: marker.address,
        iconPath: '../../../static/img/marker.png',
        width: 40,
        height: 40,
      };

    });
    this.setData({
      markers: markersData,
      longitude: markersData[0].longitude,
      latitude: markersData[0].latitude
    });
  },
  // 点击标记点时触发
  markertap(e) {
    //点击 marker 时触发,获取对应的点位信息并展示弹框
    // console.log(e.detail)
    let markerData = this.data.markers.find(marker => marker.id === e.detail.markerId);
    this.setData({
      showModal: true,
      modalData: markerData
    });
  },
  // 关闭弹框
  onClose() {
    this.setData({
      showModal: false
    });
  },
  navigateToMap() {
    const modalData = this.data.modalData;
    const {
      longitude,
      latitude
    } = modalData;
    // 调用小程序API打开高德地图并进行导航
    wx.openLocation({
      longitude,
      latitude,
      name: modalData.location, // 标记点名称,可根据实际情况设置
      scale: 18, // 地图缩放级别,可根据实际情况设置
    });
  },
  isOutOfChina(e, a) {
    return a < 72.004 || a > 137.8347 || (e < .8293 || e > 55.8271)
  },
  transforLat(e, a) {
    var t = 2 * e - 100 + 3 * a + .2 * a * a + .1 * e * a + .2 * Math.sqrt(Math.abs(e));
    return t += 2 * (20 * Math.sin(6 * e * this.data.G.pi) + 20 * Math.sin(2 * e * this.data.G.pi)) / 3,
      t += 2 * (20 * Math.sin(a * this.data.G.pi) + 40 * Math.sin(a / 3 * this.data.G.pi)) / 3,
      t += 2 * (160 * Math.sin(a / 12 * this.data.G.pi) + 320 * Math.sin(a * this.data.G.pi / 30)) / 3
  },
  transforLng(e, a) {
    var t = 300 + e + 2 * a + .1 * e * e + .1 * e * a + .1 * Math.sqrt(Math.abs(e));
    return t += 2 * (20 * Math.sin(6 * e * this.data.G.pi) + 20 * Math.sin(2 * e * this.data.G.pi)) / 3,
      t += 2 * (20 * Math.sin(e * this.data.G.pi) + 40 * Math.sin(e / 3 * this.data.G.pi)) / 3,
      t += 2 * (150 * Math.sin(e / 12 * this.data.G.pi) + 300 * Math.sin(e / 30 * this.data.G.pi)) / 3
  },

  transfor2Mars(e, a) {
    if (this.isOutOfChina(e, a))
      return {
        Lat: e,
        Lng: a
      };
    var t = this.transforLat(a - 105, e - 35),
      r = this.transforLng(a - 105, e - 35),
      n = e / 180 * this.data.G.pi,
      o = Math.sin(n);
    o = 1 - this.data.G.ee * o * o;
    var s = Math.sqrt(o);
    return {
      Lat: e + (t = 180 * t / (this.data.G.a * (1 - this.data.G.ee) / (o * s) * this.data.G.pi)),
      Lng: a + (r = 180 * r / (this.data.G.a / s * Math.cos(n) * this.data.G.pi))
    }

  },
})

<view>
  <!-- 地图控件 -->
  <view>
    <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="{{scale}}" markers="{{markers}}"
      bindmarkertap="markertap">
    </map>
  </view>
  <!-- 弹框 -->
  <view>
    <van-popup closeable bind:close="onClose" round custom-style="height: 30%" position="bottom" show="{{ showModal }}"
      bind:close="onClose">
      <view class="detailsBox">

        <view>
          <text>车牌号码 :</text>
          <text>{{modalData.vehNum}}</text>
        </view>
        <view>
          <text>所在位置:</text>
          <text>{{modalData.location}}</text>
          <view class="dh" bindtap="navigateToMap">地图导航
            
          </view>
          <image style="width:30px;height:30px;margin-top: 5px;position: absolute;"
              src="/static/img/map/daohang.png"></image>
        </view>


      </view>
    </van-popup>
  </view>
</view>
#map{
  width: 100%;
  height: 100vh;
}

.detailsBox{
  padding: 20rpx 20rpx 0rpx 28rpx;
  font-size: 28rpx;
}
.detailsBox view:nth-child(n+2){
  margin-top: 20rpx;
}
view{
  font-size: 18px;
}
.dh {
  display: inline-block;
  /* padding: 10px 20px; */
  color: rgb(76, 36, 255);
  font-size: 15px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-left: 20px;
}

.dh:hover {
  background-color: #0056b3;
}




相关文章
|
3月前
|
小程序 JavaScript API
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)
|
4月前
|
存储 小程序 物联网
园区导航小程序:轻量级设计,打造高效智慧园区
随着园区的规模不断扩大,功能区划分日益复杂,导致访客和新员工在没有有效导航的情况下容易迷路。传统APP导航虽能解决部分问题,但其下载安装繁琐、占用手机内存大、且非高频使用导致的闲置,让许多用户望而却步。园区导航小程序的出现,以其无需下载、即用即走的特性,为访客提供一个便捷、高效的导航体验。
113 0
园区导航小程序:轻量级设计,打造高效智慧园区
|
5月前
|
小程序 定位技术 API
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
361 0
|
5月前
|
小程序 定位技术
【微信小程序-原生开发+TDesign】地图导航(wx.openLocation的使用)
【微信小程序-原生开发+TDesign】地图导航(wx.openLocation的使用)
89 0
|
5月前
|
小程序 API
【微信小程序-原生开发】实用教程07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字)
【微信小程序-原生开发】实用教程07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字)
104 0
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
271 3
|
2月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
52 0
微信小程序更新提醒uniapp
|
4月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
112 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
4月前
|
小程序 前端开发 JavaScript
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
【避坑宝】是一款企业黑红名单吐槽小程序,旨在帮助打工人群体辨别企业优劣。该平台采用SpringBoot+MybatisPlus+uniapp+uview2等技术栈构建,具备丰富的注释与简洁的代码结构,非常适合实战练习与学习。通过小程序搜索“避坑宝”即可体验。
110 0
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
|
4月前
|
存储 小程序 JavaScript