uniapp如何使用高德地图

Posted 2023-03-20

参考技术A 下面用的高德地图v2版本，使用的【Key】【安全密钥】仅用于学习与测试（使用次数有限制），公司或个人的项目请到高德控制台中心申请。
amap.vue组件

效果图：

uniapp百度echarts图表使用：
https://www.jianshu.com/p/409e5453fd38

高德地图控制台中心
https://console.amap.com/dev/key/app

高德地图API文档
https://lbs.amap.com/api/jsapi-v2/summary/

uniapp使用高德JS API

在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>