正文

揭秘uniapp与高德地图无缝对接，轻松实现移动端定位与导航！

/0 浏览量
0320

引言

随着移动设备的普及和互联网技术的发展，移动端地图应用已经成为了人们生活中不可或缺的一部分。uniapp作为一款跨平台开发框架，能够帮助开发者快速构建出适用于iOS、Android和H5等多个平台的移动应用。而高德地图作为国内领先的地图服务提供商，提供了丰富的地图API和功能。本文将详细介绍如何使用uniapp与高德地图无缝对接，实现移动端定位与导航功能。

准备工作

在开始之前，请确保以下准备工作已完成：

  1. 安装uniapp开发环境，并创建一个新的uniapp项目。
  2. 在高德地图开放平台注册账号，并获取App Key。
  3. 在uniapp项目中配置高德地图SDK。

配置高德地图SDK

  1. 在uniapp项目中，找到src/main.js文件。
  2. 在该文件中，引入高德地图SDK：
import amapFile from '@/common/amap-wx.js';

uniApp.mpType = 'app';

const amapFile = require('@/common/amap-wx.js');

Vue.prototype.$amapFile = amapFile;
  1. 在src/common/amap-wx.js文件中，配置高德地图App Key：
export default {
  ak: '你的高德地图App Key'
}

实现定位功能

  1. 在uniapp项目中，创建一个新的页面，例如location.vue。
  2. 在该页面的<template>中，添加地图容器：
<view class="container">
  <map id="map" longitude="longitude" latitude="latitude" scale="16" show-location></map>
</view>
  1. 在页面的<script>中，引入高德地图SDK，并获取地图实例：
import { ak } from '@/common/amap-wx.js';

export default {
  data() {
    return {
      longitude: '',
      latitude: '',
      mapCtx: null
    };
  },
  onReady() {
    this.mapCtx = uni.createMapContext('map');
    this.getLocation();
  },
  methods: {
    getLocation() {
      uni.getLocation({
        type: 'gcj02',
        success: (res) => {
          this.longitude = res.longitude;
          this.latitude = res.latitude;
          this.mapCtx.moveToLocation();
        }
      });
    }
  }
}
  1. 在页面的<style>中，添加样式：
.container {
  width: 100%;
  height: 100%;
}

实现导航功能

  1. 在uniapp项目中，创建一个新的页面，例如navigation.vue。
  2. 在该页面的<template>中，添加地图容器和输入框：
<view class="container">
  <map id="map" longitude="longitude" latitude="latitude" scale="16" show-location></map>
  <input type="text" v-model="startPoint" placeholder="起点" />
  <input type="text" v-model="endPoint" placeholder="终点" />
  <button @click="getRoute">获取路线</button>
</view>
  1. 在页面的<script>中，引入高德地图SDK，并获取地图实例：
import { ak } from '@/common/amap-wx.js';

export default {
  data() {
    return {
      longitude: '',
      latitude: '',
      startPoint: '',
      endPoint: '',
      mapCtx: null
    };
  },
  onReady() {
    this.mapCtx = uni.createMapContext('map');
    this.getLocation();
  },
  methods: {
    getLocation() {
      uni.getLocation({
        type: 'gcj02',
        success: (res) => {
          this.longitude = res.longitude;
          this.latitude = res.latitude;
          this.mapCtx.moveToLocation();
        }
      });
    },
    getRoute() {
      if (this.startPoint === '' || this.endPoint === '') {
        uni.showToast({
          title: '请输入起点和终点',
          icon: 'none'
        });
        return;
      }
      this.mapCtx.includePoints({
        points: [
          { longitude: this.longitude, latitude: this.latitude },
          { longitude: this.longitude, latitude: this.latitude }
        ]
      });
      this.mapCtx.getRoute({
        mode: 'driving',
        origin: `${this.longitude},${this.latitude}`,
        destination: `${this.longitude},${this.latitude}`,
        success: (res) => {
          this.mapCtx.drawRoute({
            polyline: {
              points: res.routes[0].paths[0].steps,
              color: '#0091ff',
              width: 5
            },
            markers: [
              {
                id: 1,
                longitude: this.longitude,
                latitude: this.latitude,
                iconPath: '/static/起点.png'
              },
              {
                id: 2,
                longitude: this.longitude,
                latitude: this.latitude,
                iconPath: '/static/终点.png'
              }
            ]
          });
        }
      });
    }
  }
}
  1. 在页面的<style>中，添加样式：
.container {
  width: 100%;
  height: 100%;
}
input {
  margin: 10px 0;
  width: 80%;
  padding: 5px;
}
button {
  width: 80%;
}

总结

通过以上步骤，你已经成功实现了uniapp与高德地图的无缝对接，并能够轻松实现移动端定位与导航功能。在实际开发过程中，可以根据需求对地图功能进行扩展，例如添加搜索、路线规划、地点详情等。希望本文能对你有所帮助。

-- 展开阅读全文 --