接入高德地图

gnip
373 阅读2分钟

概述

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

效果示例

image.png

准备

成为开发者并创建 key

注意：

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

登录控制台

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

创建 key

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

获取 key 和密钥

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

提示

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

快速上手

安全配置

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

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

基本地图

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

添加地图控件

缩放插件

image.png

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

比例尺控件

image.png

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

定位控件

image.png

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

图层切换控件

image.png

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

image.png

搜索

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

    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);
                        });

                    });
avatar
文章
阅读
粉丝