devbox
代码探险家
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

amap/amap-jsapi-loader -- 高德地图

作者：代码探险家 | 2024-08-12 05:48:00

赞

踩

amap-jsapi-loader

一、准备

1.登录控制台

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

2.创建 key

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

3.获取 key 和密钥

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

 

二、初始化地图

1.下载依赖包

npm i @amap/amap-jsapi-loader --save

2.引入 JS API  Loader

import AMapLoader from '@amap/amap-jsapi-loader'; 

3.新建 MapContainer.jsx 文件

在项目中新建 MapContainer.jsx 文件，用作地图组件脚本。

  1. import AMapLoader from '@amap/amap-jsapi-loader';
  2. import { useEffect } from 'react';
  3. import styles from './MapContainer.css';
  4.  
  5. export default function MapContainer() {
  6.   let map: any = null;
  7.  
  8.   useEffect(() => {
  9.     AMapLoader.load({
  10.       key: 'key', // 申请好的Web端开发者Key，首次调用 load 时必填
  11.       version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  12.     })
  13.       .then((AMap: any) => {
  14.         //创建地图实例
  15.         map = new AMap.Map('container', {
  16.           // 设置地图容器id
  17.           viewMode: '2D', // 是否为3D地图模式
  18.           zoom: 10, // 初始化地图级别
  19.           center: [116.397428, 39.90923], // 初始化地图中心点位置
  20.         });
  21.       };)
  22.       .catch((e) => {
  23.         console.log(e);
  24.       });
  25.  
  26.     return () => {
  27.       map?.destroy(); //销毁地图
  28.     };
  29.   }, []);
  30.  
  31.   return (
  32.       <div
  33.         id="container"
  34.         className={styles.container}
  35.         style={{ height: '800px' }}
  36.       ></div>
  37.   );
  38. }

4.新建 MapContainer.less 文件

在项目中新建 MapContainer.less 文件，用作地图组件样式。

  1. .container{
  2.   padding: 0px;
  3.   margin: 0px;
  4.   width: 100%;
  5. }

5.效果图

三、插件的使用

1.基础插件引入

  1. AMap.plugin(
  2.     ['AMap.Scale', 'AMap.Geolocation', 'AMap.ToolBar', 'AMap.ControlBar'],
  3.     function () {
  4.         //在回调函数中实例化插件，并使用插件功能
  5.         map.addControl(new AMap.Scale()); //比例尺
  6.         map.addControl(new AMap.ToolBar()); //缩放工具条
  7.         map.addControl(new AMap.ControlBar()); //控制罗盘
  8.         map.addControl(
  9.           new AMap.Geolocation({
  10.             position: {
  11.               bottom: '80px',
  12.               left: '15px',
  13.             },
  14.           }),
  15.         ); //定位控件，用来获取和展示用户主机所在的经纬度位置
  16.     },
  17. );

更多插件参考官方文档～

 2.信息窗体 InfoWindow

默认信息窗体封装了关闭按钮，使用 API 默认的信息窗体样式，这个时候只需要对 InfoWindow 设定 content 属性即可，content 可以是 dom 对象，也可以是 html 识别的字符串。

  1.         //定义信息窗口
  2.         let infoWindow: any = null;
  3.         
  4.         //打开信息窗体
  5.         map.on('click', function (e: any) {
  6.           //构建信息窗体中显示的内容
  7.           let info = [];
  8.           info.push(
  9.             '<div class=\'input-card content-window-card\'><div><img style="float:left;width:67px;height:16px;" src=" https://webapi.amap.com/images/autonavi.png "/></div> ',
  10.           );
  11.           info.push('<div style="padding:7px 0px 0px 0px;"><h4>高德软件</h4>');
  12.           info.push(
  13.             "<p class='input-item'>电话 : 010-84107000   邮编 : 100102</p>",
  14.           );
  15.           info.push(
  16.             "<p class='input-item'>地址 :北京市朝阳区望京阜荣街10号首开广场4层</p></div></div>",
  17.           );
  18.  
  19.           infoWindow = new AMap.InfoWindow({
  20.             content: info.join(''), //使用默认信息窗体框样式，显示信息内容
  21.           });
  22.  
  23.           infoWindow?.open(map, e.lnglat);
  24.         });
  25.  
  26.         // 关闭信息窗体
  27.         // infoWindow?.close();

3.右键菜单 ContextMenu

  1.         //添加右键点击事件
  2.         let contextMenu: any = null;
  3.  
  4.         //地图绑定鼠标右击事件——弹出右键菜单
  5.         map.on('rightclick', function (e: any) {
  6.           let contextMenuPositon: any = null;
  7.           contextMenu = new AMap.ContextMenu({ isOpen: false });
  8.           //右键放大
  9.           contextMenu?.addItem(
  10.             '放大一级',
  11.             function () {
  12.               map.zoomIn();
  13.             },
  14.             0,
  15.           );
  16.  
  17.           //右键缩小
  18.           contextMenu?.addItem(
  19.             '缩小一级',
  20.             function () {
  21.               map.zoomOut();
  22.             },
  23.             1,
  24.           );
  25.  
  26.           //右键显示全国范围
  27.           contextMenu?.addItem(
  28.             '缩放至全国范围',
  29.             function () {
  30.               map.setZoomAndCenter(4, [108.946609, 34.262324]);
  31.             },
  32.             2,
  33.           );
  34.  
  35.           //右键添加Marker标记
  36.           contextMenu?.addItem(
  37.             '添加标记',
  38.             function () {
  39.               new AMap.Marker({
  40.                 map: map,
  41.                 position: contextMenuPositon, //基点位置
  42.               });
  43.             },
  44.             3,
  45.           );
  46.  
  47.           contextMenu?.open(map, e.lnglat);
  48.           contextMenuPositon = e.lnglat;
  49.         });
  50.  
  51.         // 关闭右键弹框
  52.         // contextMenu?.close();

4.输入提示与 POI 搜索示例

首先需要设置一下密钥

  1. window._AMapSecurityConfig = {
  2.   securityJsCode: 'b4fcd93bbbaead6bcc38957a0f0e3df6',
  3. };

创建id为tipinput的输入框 

<input id="tipinput" /> 

配置 

  1.         // 搜索
  2.         let auto = new AMap.AutoComplete({ input: 'tipinput' });
  3.         let placeSearch = new AMap.PlaceSearch({
  4.           map: map,
  5.         }); //构造地点查询类
  6.         auto.on('select', function (e: any) {
  7.           placeSearch.setCity(e.poi.adcode);
  8.           placeSearch.search(e.poi.name); //关键字查询查询
  9.         }); //注册监听，当选中某条记录时会触发

 

四、完整代码

1.效果图

2.代码 

  1. import AMapLoader from '@amap/amap-jsapi-loader';
  2. import { Input } from 'antd';
  3. import { useEffect } from 'react';
  4. import './MapContainer.less';
  5. window._AMapSecurityConfig = {
  6.   securityJsCode: 'b4fcd93bbbaead6bcc38957a0f0e3df6',
  7. };
  8. export default function MapContainer() {
  9.   let map: any = null;
  10.  
  11.   const createMap = (AMap: any) => {
  12.     //1.创建地图实例
  13.     map = new AMap.Map('container', {
  14.       // 设置地图容器id
  15.       viewMode: '2D', // 是否为3D地图模式
  16.       zoom: 10, // 初始化地图级别
  17.       center: [116.397428, 39.90923], // 初始化地图中心点位置
  18.       resizeEnable: true, // 调整大小启用
  19.       //   layers: [new AMap.TileLayer.Satellite()], //设置图层,可设置成包含一个或多个图层的数组
  20.       //   mapStyle: 'amap://styles/whitesmoke', //设置地图的显示样式
  21.     });
  22.  
  23.     // 2.加载插件
  24.     AMap.plugin(
  25.       [
  26.         'AMap.ToolBar',
  27.         'AMap.Scale',
  28.         'AMap.HawkEye',
  29.         'AMap.ControlBar',
  30.         'AMap.MapType',
  31.         'AMap.Geolocation',
  32.         'AMap.ContextMenu',
  33.         'AMap.AutoComplete',
  34.         'AMap.PlaceSearch',
  35.       ],
  36.       function () {
  37.         //在回调函数中实例化插件，并使用插件功能
  38.         map.addControl(
  39.           new AMap.ControlBar({
  40.             position: {
  41.               top: '10px',
  42.               right: '10px',
  43.             },
  44.           }),
  45.         ); //控制罗盘
  46.         map.addControl(new AMap.HawkEye()); //鹰眼
  47.         map.addControl(
  48.           new AMap.Geolocation({
  49.             position: {
  50.               bottom: '160px',
  51.               left: '20px',
  52.             },
  53.           }),
  54.         ); //定位控件，用来获取和展示用户主机所在的经纬度位置
  55.         map.addControl(
  56.           new AMap.ToolBar({
  57.             position: {
  58.               bottom: '80px',
  59.               left: '21px',
  60.             },
  61.           }),
  62.         ); //缩放工具条
  63.         map.addControl(
  64.           new AMap.Scale({
  65.             position: {
  66.               bottom: '35px',
  67.               left: '20px',
  68.             },
  69.           }),
  70.         ); //比例尺
  71.  
  72.         // map.addControl(
  73.         //   new AMap.MapType({
  74.         //     position: {
  75.         //       bottom: '300px',
  76.         //       right: '0',
  77.         //     },
  78.         //   }),
  79.         // ); //类别切换控件
  80.  
  81.         //3.添加右键点击事件
  82.         let contextMenu: any = null;
  83.         //4.信息窗口
  84.         let infoWindow: any = null;
  85.  
  86.         //地图绑定鼠标右击事件——弹出右键菜单
  87.         map.on('rightclick', function (e: any) {
  88.           infoWindow?.close(); //清空点击事件弹框
  89.           let contextMenuPositon: any = null;
  90.           contextMenu = new AMap.ContextMenu({ isOpen: false });
  91.           //右键放大
  92.           contextMenu?.addItem(
  93.             '放大一级',
  94.             function () {
  95.               map.zoomIn();
  96.             },
  97.             0,
  98.           );
  99.  
  100.           //右键缩小
  101.           contextMenu?.addItem(
  102.             '缩小一级',
  103.             function () {
  104.               map.zoomOut();
  105.             },
  106.             1,
  107.           );
  108.  
  109.           //右键显示全国范围
  110.           contextMenu?.addItem(
  111.             '缩放至全国范围',
  112.             function () {
  113.               map.setZoomAndCenter(4, [108.946609, 34.262324]);
  114.             },
  115.             2,
  116.           );
  117.  
  118.           //右键添加Marker标记
  119.           contextMenu?.addItem(
  120.             '添加标记',
  121.             function () {
  122.               new AMap.Marker({
  123.                 map: map,
  124.                 position: contextMenuPositon, //基点位置
  125.               });
  126.             },
  127.             3,
  128.           );
  129.  
  130.           contextMenu?.open(map, e.lnglat);
  131.           contextMenuPositon = e.lnglat;
  132.         });
  133.  
  134.         //打开信息窗体
  135.         map.on('click', function (e: any) {
  136.           contextMenu?.close(); //关闭右键弹框
  137.           //构建信息窗体中显示的内容
  138.           let info = [];
  139.           info.push(
  140.             '<div class=\'input-card content-window-card\'><div><img style="float:left;width:67px;height:16px;" src=" https://webapi.amap.com/images/autonavi.png "/></div> ',
  141.           );
  142.           info.push('<div style="padding:7px 0px 0px 0px;"><h4>高德软件</h4>');
  143.           info.push(
  144.             "<p class='input-item'>电话 : 010-84107000   邮编 : 100102</p>",
  145.           );
  146.           info.push(
  147.             "<p class='input-item'>地址 :北京市朝阳区望京阜荣街10号首开广场4层</p></div></div>",
  148.           );
  149.  
  150.           infoWindow = new AMap.InfoWindow({
  151.             content: info.join(''), //使用默认信息窗体框样式，显示信息内容
  152.           });
  153.  
  154.           infoWindow?.open(map, e.lnglat);
  155.         });
  156.  
  157.         // 4.搜索
  158.         let auto = new AMap.AutoComplete({ input: 'tipinput' });
  159.         let placeSearch = new AMap.PlaceSearch({
  160.           map: map,
  161.         }); //构造地点查询类
  162.         auto.on('select', function (e: any) {
  163.           placeSearch.setCity(e.poi.adcode);
  164.           placeSearch.search(e.poi.name); //关键字查询查询
  165.         }); //注册监听，当选中某条记录时会触发
  166.       },
  167.     );
  168.   };
  169.  
  170.   const onCatch = (e: any) => {
  171.     console.log(e);
  172.   };
  173.  
  174.   const mountMap = () => {
  175.     map?.destroy(); //销毁地图
  176.   };
  177.  
  178.   useEffect(() => {
  179.     AMapLoader.load({
  180.       key: 'e558ae3e565bc8f545a98d88794aada5', // 申请好的Web端开发者Key，首次调用 load 时必填
  181.       version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  182.       plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  183.     })
  184.       .then(createMap)
  185.       .catch(onCatch);
  186.  
  187.     return mountMap;
  188.   }, []);
  189.  
  190.   return (
  191.     <div className="map">
  192.       <div id="container" style={{ height: '800px' }}></div>
  193.       <Input id="tipinput" placeholder="请输入搜索内容" />
  194.     </div>
  195.   );
  196. }

3.样式 

  1. .map {
  2.   position: relative;
  3.   .container {
  4.     padding: 0px;
  5.     margin: 0px;
  6.     width: 100%;
  7.   }
  8.   #tipinput {
  9.     position: absolute;
  10.     left: 10px;
  11.     top: 10px;
  12.     width: 200px;
  13.   }
  14.   .amap-sug-result {
  15.     z-index: 9999;
  16.     visibility: visible;
  17.   }
  18. }

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号