uniapp(安卓端)高德地图的使用

说明：

使用高德地图同样需要高德地图开发者平台申请账号，key等，同样需要制作自定义调试基座这些操作可以参考

uniapp(安卓端)百度地图的使用

地图的定位同样可以，代码完全一样

定位获取到的信息

地图的展示

高德地图的展示和百度地图的展示原理是一样的，只不过是所依赖的一个是高德的框架，一个是百度的框架

<template>

  <view class="component-amap">

    <view class="loading">地图加载中</view>

    <view id="amap" class="amap" :listArr="listArr" :change:listArr="ModuleInstance.setParkList"></view>

  </view>

</template>

mounted(){

        if (window.AMap) {

            // 观测更新的数据在 view 层可以直接访问到

            this.initAmap();

        } else {

            // 动态引入较大类库避免影响页面展示

            const script = document.createElement('script')

        // view 层的页面运行在 www 根目录，其相对路径相对于 www 计算

            script.src = `https://webapi.amap.com/maps?v=2.0&key=b0c8fc70cd402ddb153c3416e9261d50`;//您申请的key值

            //script标签的onload事件都是在外部js文件被加载完成并执行完成后才被触发的

        script.onload = () => {

                window._AMapSecurityConfig = {

                    securityJsCode:'f1b946e6f51b1235374f1f92c38b0c33',//您申请的安全密钥

                }

                this.initAmap();

            }

            document.head.appendChild(script);

        }

    },

methods: {

        initAmap(){

            this.map = new AMap.Map('amap', {

                zoom: 13,//显示的缩放级别

                zooms: [2, 30],//地图显示的缩放级别范围, 默认为 [2, 20] ，取值范围 [2 ~ 30]

                center: [113.276521,23.133519]

            });

            this.map.on("complete", ()=>{

                console.log("地图加载完成！"); 

                this.createLabelsLayer();

            });

        },

这里的代码只是展示了一些关键信息，其他实现需要查看高德关于JavaScript API

展示效果