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

说明:

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

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

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

定位获取到的信息

地图的展示

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

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

展示效果

你可能感兴趣的:(uniapp(安卓端)高德地图的使用)