高德地图api使用

最新推荐文章于 2024-07-04 11:05:07 发布

gaomu_v

最新推荐文章于 2024-07-04 11:05:07 发布

阅读量403

点赞数 7

文章标签： js 前端 javascript

本文链接：https://blog.csdn.net/gaomu_v/article/details/136028396

版权

本文指导如何在高德开放平台上注册账号，创建应用并获取key和安全密钥，以及在web端使用JSAPI进行地图集成的代码示例。

摘要由CSDN通过智能技术生成

注册高德开放平台账号

   1.注册高德开放平台api账号 
   2.应用管理->创建我的应用->服务平台选---web端(JS API)

高德开放平台

创建完成后自动生成key和安全密钥

在这里插入图片描述

代码部分

    window._AMapSecurityConfig = {
        securityJsCode: "安全密钥",
    };
    AMapLoader.load({
        key: "key", //申请好的 Web 端开发 Key，首次调用 load 时必填
        version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['AMap.Scale','...','...']
        AMapUI: {
            version: "1.1", //AMapUI 版本
            plugins: ["overlay/SimpleMarker"], //需要加载的 AMapUI ui 插件
        },
        Loca: {
            //是否加载 Loca， 缺省不加载
            version: "2.0", //Loca 版本
        },
    })
        .then((AMap) => {
            var map = new AMap.Map("myMap", {
                zoom: 10, //缩放层级
                center: [113.625351, 34.746303], //中心点坐标(郑州)
            }); //"my-Map"为 <div> 容器的 id
            map.addControl(new AMap.Scale()); //添加比例尺组件到地图实例上
        })
        .catch((e) => {
            console.error(e); //加载错误提示
        });