您现在的位置是:首页 > Javascript
当前栏目
uniapp使用高德JS API
2023-03-31 10:43:06 时间
在uniapp开发学习过程中经常会遇到uniapp内置地图组件map功能不够强大,或者地图层级过高通过nvue等方式解决又会出现其他bug的情况。
这种时候就需要用到第三方提供的地图插件来实现自己想要的效果了。在国内最常用的地图应该就是高德,腾讯,百度等平台开发的地图。
今天就以高德为例详细教大家如何在自己的uniapp项目中使用高德地图。
想要在uniapp中使用高德地图只需要三个步骤。
第一步:申请key
准备-入门-教程-地图 JS API v2.0|高德地图API (amap.com)
第二步:加载JS API
JSAPI 的加载-入门-教程-地图 JS API v2.0|高德地图API (amap.com)
第三步:初始化地图
快速上手-入门-教程-地图 JS API v2.0|高德地图API (amap.com)
这些都是高德文档上已经有了的就不多赘述了,下面说一些注意事项
1、申请key的时候勾选Web端(JS API)
2、如果要适配手机端,加载JS API时通过renderjs加载。
3、加载的API应当是2.0版本,低于2.0会有定位不准的情况。
4、renderjs在H5中视图层和逻辑层其实都是运行在同一个环境中所以会很顺利,但是在手机端逻辑层无法直接访问视图层的数据。可以通过监听逻辑层的属性改变来实现事件。
5、tenderjs用法示例。
6、加载示例
<template>
<view style="width:100%;height:500px;" id="container"></view><!-- 必须有宽高 -->
</template>
<script>// 逻辑层
export default {
data(){
return {
// ...
}
}
}
</script>
<script module="test" lang="renderjs">// 视图层
export default {
mounted() {
// ...
},
mounted(){
window._AMapSecurityConfig = {
securityJsCode:'「您申请的安全密钥」',
}
window.onLoad = function(){
var map = new AMap.Map('container');// 初始化地图;container为渲染节点的id
}
var url = 'https://webapi.amap.com/maps?v=2.0&key=您申请的key值&callback=onLoad';
var jsapi = document.createElement('script');
jsapi.charset = 'utf-8';
jsapi.src = url;
document.head.appendChild(jsapi);
},
methods: {
// ...
}
}
</script>
相关文章
- 经典Windows组件大翻新!Windows 11新版记事本官宣
- 浏览器和 Node.js 的 EventLoop 事件循环机制知多少?
- Windows11这鸡肋功能太烦人?教你关闭系统小组件
- Windows 11小组件:你需要知道的一切
- HarmonyOS ArkUI之自定义组件侧滑菜单(JS)
- HarmonyOS自定义组件之分页功能组件封装实例
- 微软:2022年将重点解决Windows性能低下的问题
- HarmonyOS ArkUI之仿微信朋友圈图片预览
- Django3 使用 WebSocket 实现 WebShell
- 分库分表实战之订单业务完整梳理
- 太上老君的炼丹炉之分布式 Quorum NWR
- JeecgBoot的前端Form升级为FormModel用法
- 前端进阶:原生JavaScript实现具有进度监听的文件上传预览组件
- 如何编写神奇的「插件机制」,优化基于 Antd Table 封装表格的混乱代码
- Java8新特性系列-默认方法和静态方法
- Web开发应了解的5种设计模式
- 死磕JS:Reflect.ownKeys() 和 Object.keys() 怎么选?
- 看完这篇,再也不会害怕别人问我什么是原型了
- 为何每次用完 ThreadLocal 都要调用 remove()
- 软件工程必看——10条你最容易忽视的经典法则