在 Uniapp 中，可以通过使用 uni-app 统一的 API 来同时兼容 H5、web、App 和微信小程序，而引入高德地图则有以下两种语法格式供选择：
- 使用 Vue.js 的语法格式：
<template> <view> <map :longitude="longitude" :latitude="latitude" :markers="markers"></map> </view> </template> <script> export default { data() { return { longitude: "", latitude: "", markers: [] } }, onLoad() { // 获取地图信息 uni.getLocation({ type: "gcj02", success: res => { this.longitude = res.longitude this.latitude = res.latitude } }) // 添加标记点 this.markers.push({ id: 1, longitude: 113.324520, latitude: 23.099994, title: "我的位置", iconPath: "/static/images/location.png", width: 50, height: 50 }) } } </script>
- 使用原生 JavaScript 的语法格式：
<template> <view> <web-view :src="webviewSrc"></web-view> </view> </template> <script> export default { data() { return { webviewSrc: "" } }, onLoad() { // 引入高德地图 JS API this.webviewSrc = "https://webapi.amap.com/maps?v=1.4.15&key=您的高德地图API Key&callback=initMap" } } </script>
需要注意的是，这两种语法格式都需要在页面组件的 JavaScript 文件中引入相应的 API 文件，如下所示：
// 引入 Vue.js 的语法格式需要的 API 文件 import { Map, Marker } from "@/uni_modules/@dcloudio/vue-amap/uni.vue3.amap.js" // 引入原生 JavaScript 的语法格式需要的 API 文件 import global from "@/common/utils/global.js"
以上是在uni-app中同时兼容 H5、web、App 和微信小程序引入高德地图的语法格式。
