UniApp+vue3+call Gaode map js Api2.0
最编程
2024-05-07 14:48:11
...
第一步 申请高德地图Key
第二步
https://lbs.amap.com/api/javascript-api-v2/guide/abc/amap-vue
第三步 踩坑
官方提供代码,运行后会发现,JSapi不支持,手机运行白屏、H5运行正常。
官方示例
<script setup> import { onMounted, onUnmounted } from "vue"; import AMapLoader from "@amap/amap-jsapi-loader"; let map = null; onMounted(() => { AMapLoader.load({ key: "", // 申请好的Web端开发者Key,首次调用 load 时必填 version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15 plugins: [], // 需要使用的的插件列表,如比例尺'AMap.Scale'等 }) .then((AMap) => { map = new AMap.Map("container", { // 设置地图容器id viewMode: "3D", // 是否为3D地图模式 zoom: 11, // 初始化地图级别 center: [116.397428, 39.90923], // 初始化地图中心点位置 }); }) .catch((e) => { console.log(e); }); }); onUnmounted(() => { map?.destroy(); }); </script> <template> <div id="container"></div> </template> <style scoped> #container { width: 100%; height: 800px; } </style>
第四步、解决
uniapp必须得套个图层renderjs
注意:vue3 项目不支持 setup script
用法
上代码
<script module="test" lang="renderjs"> import { onMounted, onUnmounted } from "vue"; // 添加高德安全密钥(不加无法定位) window._AMapSecurityConfig = { securityJsCode: "" }; import AMapLoader from "@amap/amap-jsapi-loader"; let map = null; export default { mounted() { this.initMap(); }, unmounted() { map?.destroy(); }, methods: { initMap() { AMapLoader.load({ key: "", // 申请好的Web端开发者Key,首次调用 load 时必填 version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15 plugins: ['AMap.Geocoder'], // 需要使用的的插件列表,如比例尺'AMap.Scale'等 }) .then((AMap) => { map = new AMap.Map("container", { // 设置地图容器id viewMode: "3D", // 是否为3D地图模式 zoom: 11, // 初始化地图级别 center: [118.796877, 32.060255], // 初始化地图中心点位置 }); // 初始化逆地理编码 var geocoder = new AMap.Geocoder({ // city 指定进行编码查询的城市,支持传入城市名、adcode 和 citycode city: '010' }) let that = this geocoder.getAddress(['118.7239', '32.002'], function(status, result) { console.log(result); if (status === 'complete' && result.info === 'OK') { console.log(result.regeocode.formattedAddress); // result为对应的地理位置详细信息 that.address = result.regeocode.formattedAddress } }) // var marker = new AMap.Marker({ // icon: "", // position: [118.803678, 32.067247] // }); // map.add(marker); // map.setFitView(); }) .catch((e) => { console.log(e); }); } } } </script> <template> <div id="container"></div> </template> <style scoped> #container { width: 100%; height: 800px; } </style>
最终app和h5 都可以显示了。
原地址:https://www.cnblogs.com/blue123/p/17987408
上一篇: WPF 加载高清地图
下一篇: Goldmap Android 第一步