uni-app支持更多地图调用

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

uni-app支持更多地图调用

H5里的定位与地图 是否能支持百度与高德? 腾讯用的人太少了.

1 回复

在uni-app中,你可以通过集成不同的地图SDK来实现多种地图的调用。以下是如何在uni-app中集成并调用高德地图和腾讯地图的示例代码。

1. 集成高德地图

首先,你需要在高德开放平台申请一个Key,然后在manifest.json中添加高德地图的SDK配置:

"mp-weixin": {
  "appid": "YOUR_APPID",
  "setting": {
    "urlCheck": false
  },
  "usingComponents": true,
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  },
  "plugins": {
    "amap-wx": {
      "version": "1.4.15",
      "provider": "wx6afed118d9e81df9"
    }
  }
}

然后,在你的页面代码中调用高德地图:

<template>
  <view>
    <map
      id="map"
      longitude="{{longitude}}"
      latitude="{{latitude}}"
      scale="18"
      markers="{{markers}}"
      show-location
      style="width: 100%; height: 500px;"
    >
      <cover-view>
        <cover-image src="/static/location.png" style="width: 50px; height: 50px;"></cover-image>
      </cover-view>
    </map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      latitude: 39.906901,
      longitude: 116.397972,
      markers: [{
        id: 1,
        latitude: 39.906901,
        longitude: 116.397972,
        iconPath: '/static/marker.png',
        width: 50,
        height: 50
      }]
    };
  }
}
</script>

2. 集成腾讯地图

对于腾讯地图,你需要在腾讯位置服务申请一个Key,并在manifest.json中添加腾讯地图的SDK配置(这里以微信小程序为例,其他平台类似):

"mp-weixin": {
  "appid": "YOUR_APPID",
  "plugins": {
    "tencent-map": {
      "version": "1.4.0",
      "provider": "wx069ba97219f66d99"
    }
  }
}

然后在页面代码中调用腾讯地图:

<template>
  <view>
    <map
      id="qqmap"
      longitude="{{longitude}}"
      latitude="{{latitude}}"
      scale="14"
      markers="{{markers}}"
      show-location
      style="width: 100%; height: 500px;"
    ></map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      latitude: 39.9042,
      longitude: 116.4074,
      markers: [{
        id: 1,
        latitude: 39.9042,
        longitude: 116.4074,
        iconPath: '/static/qq_marker.png',
        width: 50,
        height: 50
      }]
    };
  }
}
</script>

注意:以上代码示例仅适用于微信小程序,对于其他平台如H5、App等,需要参考对应平台的SDK文档进行配置和调用。确保你已经正确配置了各个地图平台的Key,并引入了必要的SDK文件。

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!