在 Uniapp 中，可以通過(guò)使用 uni-app 統(tǒng)一的 API 來(lái)同時(shí)兼容 H5、web、App 和微信小程序，而引入高德地圖則有以下兩種語(yǔ)法格式供選擇：
- 使用 Vue.js 的語(yǔ)法格式：
<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
}
})
// 添加標(biāo)記點(diǎn)
this.markers.push({
id: 1,
longitude: 113.324520,
latitude: 23.099994,
title: "我的位置",
iconPath: "/static/images/location.png",
width: 50,
height: 50
})
}
}
</script>
- 使用原生 JavaScript 的語(yǔ)法格式：
<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>
需要注意的是，這兩種語(yǔ)法格式都需要在頁(yè)面組件的 JavaScript 文件中引入相應(yīng)的 API 文件，如下所示：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-742969.html
// 引入 Vue.js 的語(yǔ)法格式需要的 API 文件
import { Map, Marker } from "@/uni_modules/@dcloudio/vue-amap/uni.vue3.amap.js"
// 引入原生 JavaScript 的語(yǔ)法格式需要的 API 文件
import global from "@/common/utils/global.js"
以上是在uni-app中同時(shí)兼容 H5、web、App 和微信小程序引入高德地圖的語(yǔ)法格式。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-742969.html
到了這里，關(guān)于Uniapp 中，能夠同時(shí)兼容H5、web、app、微信小程序的引入高德地圖的語(yǔ)法格式的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
