接入高德地图

概述

项目有时候需要用到地图相关的功能,常见的可以接入高德、百度、腾讯这些,总体来说,大体的接入方式差不多,以下通过高德地图接入项目做一期示例。

效果示例

准备

成为开发者并创建 key

注意:

key非常重要,接入地图的凭证

登录控制台

登录 高德开放平台控制台,如果没有开发者账号,请 注册开发者

创建 key

进入应用管理,创建新应用,新应用中添加 key,服务平台选择 Web端(JS API)。

获取 key 和密钥

创建成功后,可获取 key 和安全密钥。

提示

安全密钥机制旨在提升用户对 key 的安全有效管理,降低明文传输被窃取的风险。 2021年12月02日后创建的 key 必须配备安全密钥一起使用,具体用法参见 JS API 安全密钥使用

快速上手

安全配置

以下必须配置,否则部分功能无法使用!

js 复制代码
   <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode: "97de88ef2cd411e6b92e56fa60e7ded3",//控制台创建的安全秘钥
        };
    </script>

基本地图

html 复制代码
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
    //地图加载器
    <script src="https://webapi.amap.com/loader.js"></script>
    <title>HELLO,AMAP!</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #panel {
            position: absolute;
            background-color: white;
            max-height: 90%;
            overflow-y: auto;
            top: 10px;
            right: 10px;
            width: 280px;
        }

        html,
        body,
        #container {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>

    <div id="container"></div>
        <script>
        AMapLoader.load({
            key: "ecb74ca8a999af4d93d8211abaa96b92", //申请好的Web端开发者 Key,调用 load 时必填
            version: "2.0", //指定要加载的 JS API 的版本,缺省时默认为 1.4.15
        })
            .then((AMap) => {
            // 地图实例
                const map = new AMap.Map("container");
            })
            .catch((e) => {
                console.error(e); //加载错误提示
            });

    </script>
</body>

</html>

添加地图控件

缩放插件

js 复制代码
 // 注册缩放插件
  map.plugin(["AMap.ToolBar"], function () {
      const ToolBar = new AMap.ToolBar();
      map.addControl(ToolBar);
    });

比例尺控件

js 复制代码
 // 注册比例尺控件
  map.plugin(["AMap.Scale"], function () {
      const Scale = new AMap.Scale();
      map.addControl(Scale);
    });

定位控件

js 复制代码
 // 注册定位控件
  map.plugin(["AMap.Geolocation"], function () {
      const Geolocation = new AMap.Geolocation();
      map.addControl(Geolocation);
    });

图层切换控件

js 复制代码
 // 注册图层切换控件
  map.plugin(["AMap.MapType"], function () {
      const MapType = new AMap.MapType();
      map.addControl(MapType);
    });

搜索

可使用内置的搜索控件,也可以使用搜索结果自定义ui

js 复制代码
    map.plugin(["AMap.PlaceSearch"], function () {
                        const placeSearch = new AMap.PlaceSearch({
                            pageSize: 5, //单页显示结果条数
                            pageIndex: 1, //页码
                            city: "010", //兴趣点城市
                            citylimit: true, //是否强制限制在设置的城市内搜索
                            map: map, //展现结果的地图实例
                            panel: "panel", //参数值为你页面定义容器的 id 值<div id="my-panel"></div>,结果列表将在此容器中进行展示。
                            autoFitView: true, //是否自动调整地图视野使绘制的 Marker 点都处于视口的可见范围
                        });
                        placeSearch.search("北京大学", function (status, result) {
                        //这里可以根据结果自定义UI
                            console.log("搜索结果", status, result);
                        });

                    });
相关推荐
WindStormrage2 小时前
崩溃埋点的实现 —— 基于 Reporting API 的前端崩溃上报
前端·性能优化
十一.3662 小时前
171-178CSS3新增
前端·javascript·css3
用户21411832636022 小时前
dify案例分享-零代码用 Dify 使用梦 AI 3.0 多模态模型,免费生成影视级视频
前端
Jerry3 小时前
Compose 布局和修饰符的基础知识
前端
袁煦丞3 小时前
Reader断点续传高手:cpolar内网穿透实验室第609个成功挑战
前端·程序员·远程工作
快乐是Happy3 小时前
使用 vue+electron+vite 搭建一个属于自己的桌面端应用
前端
该用户已不存在3 小时前
Windows 开发环境这么难配,为什么还有那么多人在用?
前端·windows·后端
gnip3 小时前
深度封装tree公共组件
前端·javascript·vue.js
mon_star°3 小时前
《浪浪山小妖怪》知识竞赛来袭!测测你是几级影迷?
前端·css·html