uni-app中如何嵌入高德地图导航?(其他地图也可以)

发布于 1周前 作者 eggper 来自 Uni-App

uni-app中如何嵌入高德地图导航?(其他地图也可以)

不跳转到高德地图,在app里面使用高德

2 回复

参考map组件或者使用webview


在uni-app中嵌入高德地图导航功能,可以通过调用高德地图的JSAPI来实现。以下是一个示例代码,展示如何在uni-app中嵌入高德地图并实现导航功能。

首先,你需要在高德地图开放平台申请一个API Key,并确保在项目中正确引入高德地图的JS SDK。

1. 在manifest.json中配置权限

确保你的uni-app项目有访问网络的权限:

"mp-weixin": {
    "appid": "your-appid",
    "setting": {
        "urlCheck": false,
        "requestDomain": ["*.amap.com"],  // 添加高德地图域名
        "wsRequestDomain": ["*.amap.com"]
    }
}

2. 在页面引入高德地图JS SDK

在你的页面文件中(例如index.vue),引入高德地图的JS SDK:

<template>
  <view>
    <div id="container" style="width: 100%; height: 300px;"></div>
    <button @click="navigate">开始导航</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      map: null,
      startPoint: { lng: 116.397428, lat: 39.90923 },  // 起点坐标
      endPoint: { lng: 117.200983, lat: 39.084158 }    // 终点坐标
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const self = this;
      const script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = `https://webapi.amap.com/maps?v=1.4.15&key=YOUR_AMAP_KEY`;  // 替换为你的API Key
      document.head.appendChild(script);
      script.onload = function() {
        self.map = new AMap.Map('container', {
          resizeEnable: true,
          center: self.startPoint,
          zoom: 15
        });
      };
    },
    navigate() {
      if (this.map) {
        AMap.plugin('AMap.Driving', () => {
          const driving = new AMap.Driving({
            policy: AMap.DrivingPolicy.LEAST_TIME,  // 导航策略
            showTraffic: true,  // 是否显示路况
            map: this.map
          });
          driving.search(this.startPoint, this.endPoint, (status, result) => {
            if (status === 'complete') {
              console.log('导航成功', result);
            } else {
              console.error('导航失败', result);
            }
          });
        });
      }
    }
  }
};
</script>

注意事项

  1. API Key:替换代码中的YOUR_AMAP_KEY为你从高德地图开放平台获取的API Key。
  2. 坐标startPointendPoint是起点和终点的坐标,你可以根据实际情况修改。
  3. 网络权限:确保你的应用有访问外部网络的权限,特别是在微信小程序等平台。

通过上述代码,你可以在uni-app中嵌入高德地图并实现基本的导航功能。如果需要更复杂的功能,可以参考高德地图的官方文档进行进一步开发。

回到顶部