网站开发与移动互联,企业网站建设需要许可证吗,网站死链怎么处理,常熟市网页设计公司一、准备
1.登录控制台
登录 高德开放平台控制台#xff0c;如果没有开发者账号#xff0c;请 注册开发者。 2.创建 key
进入应用管理#xff0c;创建新应用#xff0c;新应用中添加 key#xff0c;服务平台选择 Web端(JS API)。 3.获取 key 和密钥
创建成功后#x…一、准备
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 文件用作地图组件脚本。
import AMapLoader from amap/amap-jsapi-loader;
import { useEffect } from react;
import styles from ./MapContainer.css;export default function MapContainer() {let map: any null;useEffect(() {AMapLoader.load({key: key, // 申请好的Web端开发者Key首次调用 load 时必填version: 2.0, // 指定要加载的 JSAPI 的版本缺省时默认为 1.4.15}).then((AMap: any) {//创建地图实例map new AMap.Map(container, {// 设置地图容器idviewMode: 2D, // 是否为3D地图模式zoom: 10, // 初始化地图级别center: [116.397428, 39.90923], // 初始化地图中心点位置});};).catch((e) {console.log(e);});return () {map?.destroy(); //销毁地图};}, []);return (dividcontainerclassName{styles.container}style{{ height: 800px }}/div);
}4.新建 MapContainer.less 文件
在项目中新建 MapContainer.less 文件用作地图组件样式。
.container{padding: 0px;margin: 0px;width: 100%;
}
5.效果图 三、插件的使用
1.基础插件引入
AMap.plugin([AMap.Scale, AMap.Geolocation, AMap.ToolBar, AMap.ControlBar],function () {//在回调函数中实例化插件并使用插件功能map.addControl(new AMap.Scale()); //比例尺map.addControl(new AMap.ToolBar()); //缩放工具条map.addControl(new AMap.ControlBar()); //控制罗盘map.addControl(new AMap.Geolocation({position: {bottom: 80px,left: 15px,},}),); //定位控件用来获取和展示用户主机所在的经纬度位置},
); 更多插件参考官方文档 2.信息窗体 InfoWindow
默认信息窗体封装了关闭按钮使用 API 默认的信息窗体样式这个时候只需要对 InfoWindow 设定 content 属性即可content 可以是 dom 对象也可以是 html 识别的字符串。 //定义信息窗口let infoWindow: any null;//打开信息窗体map.on(click, function (e: any) {//构建信息窗体中显示的内容let info [];info.push(div class\input-card content-window-card\divimg stylefloat:left;width:67px;height:16px; src https://webapi.amap.com/images/autonavi.png //div ,);info.push(div stylepadding:7px 0px 0px 0px;h4高德软件/h4);info.push(p classinput-item电话 : 010-84107000 邮编 : 100102/p,);info.push(p classinput-item地址 :北京市朝阳区望京阜荣街10号首开广场4层/p/div/div,);infoWindow new AMap.InfoWindow({content: info.join(), //使用默认信息窗体框样式显示信息内容});infoWindow?.open(map, e.lnglat);});// 关闭信息窗体// infoWindow?.close(); 3.右键菜单 ContextMenu //添加右键点击事件let contextMenu: any null;//地图绑定鼠标右击事件——弹出右键菜单map.on(rightclick, function (e: any) {let contextMenuPositon: any null;contextMenu new AMap.ContextMenu({ isOpen: false });//右键放大contextMenu?.addItem(放大一级,function () {map.zoomIn();},0,);//右键缩小contextMenu?.addItem(缩小一级,function () {map.zoomOut();},1,);//右键显示全国范围contextMenu?.addItem(缩放至全国范围,function () {map.setZoomAndCenter(4, [108.946609, 34.262324]);},2,);//右键添加Marker标记contextMenu?.addItem(添加标记,function () {new AMap.Marker({map: map,position: contextMenuPositon, //基点位置});},3,);contextMenu?.open(map, e.lnglat);contextMenuPositon e.lnglat;});// 关闭右键弹框// contextMenu?.close(); 4.输入提示与 POI 搜索示例
首先需要设置一下密钥
window._AMapSecurityConfig {securityJsCode: b4fcd93bbbaead6bcc38957a0f0e3df6,
};
创建id为tipinput的输入框 input idtipinput / 配置 // 搜索let auto new AMap.AutoComplete({ input: tipinput });let placeSearch new AMap.PlaceSearch({map: map,}); //构造地点查询类auto.on(select, function (e: any) {placeSearch.setCity(e.poi.adcode);placeSearch.search(e.poi.name); //关键字查询查询}); //注册监听当选中某条记录时会触发 四、完整代码
1.效果图 2.代码
import AMapLoader from amap/amap-jsapi-loader;
import { Input } from antd;
import { useEffect } from react;
import ./MapContainer.less;
window._AMapSecurityConfig {securityJsCode: b4fcd93bbbaead6bcc38957a0f0e3df6,
};
export default function MapContainer() {let map: any null;const createMap (AMap: any) {//1.创建地图实例map new AMap.Map(container, {// 设置地图容器idviewMode: 2D, // 是否为3D地图模式zoom: 10, // 初始化地图级别center: [116.397428, 39.90923], // 初始化地图中心点位置resizeEnable: true, // 调整大小启用// layers: [new AMap.TileLayer.Satellite()], //设置图层,可设置成包含一个或多个图层的数组// mapStyle: amap://styles/whitesmoke, //设置地图的显示样式});// 2.加载插件AMap.plugin([AMap.ToolBar,AMap.Scale,AMap.HawkEye,AMap.ControlBar,AMap.MapType,AMap.Geolocation,AMap.ContextMenu,AMap.AutoComplete,AMap.PlaceSearch,],function () {//在回调函数中实例化插件并使用插件功能map.addControl(new AMap.ControlBar({position: {top: 10px,right: 10px,},}),); //控制罗盘map.addControl(new AMap.HawkEye()); //鹰眼map.addControl(new AMap.Geolocation({position: {bottom: 160px,left: 20px,},}),); //定位控件用来获取和展示用户主机所在的经纬度位置map.addControl(new AMap.ToolBar({position: {bottom: 80px,left: 21px,},}),); //缩放工具条map.addControl(new AMap.Scale({position: {bottom: 35px,left: 20px,},}),); //比例尺// map.addControl(// new AMap.MapType({// position: {// bottom: 300px,// right: 0,// },// }),// ); //类别切换控件//3.添加右键点击事件let contextMenu: any null;//4.信息窗口let infoWindow: any null;//地图绑定鼠标右击事件——弹出右键菜单map.on(rightclick, function (e: any) {infoWindow?.close(); //清空点击事件弹框let contextMenuPositon: any null;contextMenu new AMap.ContextMenu({ isOpen: false });//右键放大contextMenu?.addItem(放大一级,function () {map.zoomIn();},0,);//右键缩小contextMenu?.addItem(缩小一级,function () {map.zoomOut();},1,);//右键显示全国范围contextMenu?.addItem(缩放至全国范围,function () {map.setZoomAndCenter(4, [108.946609, 34.262324]);},2,);//右键添加Marker标记contextMenu?.addItem(添加标记,function () {new AMap.Marker({map: map,position: contextMenuPositon, //基点位置});},3,);contextMenu?.open(map, e.lnglat);contextMenuPositon e.lnglat;});//打开信息窗体map.on(click, function (e: any) {contextMenu?.close(); //关闭右键弹框//构建信息窗体中显示的内容let info [];info.push(div class\input-card content-window-card\divimg stylefloat:left;width:67px;height:16px; src https://webapi.amap.com/images/autonavi.png //div ,);info.push(div stylepadding:7px 0px 0px 0px;h4高德软件/h4);info.push(p classinput-item电话 : 010-84107000 邮编 : 100102/p,);info.push(p classinput-item地址 :北京市朝阳区望京阜荣街10号首开广场4层/p/div/div,);infoWindow new AMap.InfoWindow({content: info.join(), //使用默认信息窗体框样式显示信息内容});infoWindow?.open(map, e.lnglat);});// 4.搜索let auto new AMap.AutoComplete({ input: tipinput });let placeSearch new AMap.PlaceSearch({map: map,}); //构造地点查询类auto.on(select, function (e: any) {placeSearch.setCity(e.poi.adcode);placeSearch.search(e.poi.name); //关键字查询查询}); //注册监听当选中某条记录时会触发},);};const onCatch (e: any) {console.log(e);};const mountMap () {map?.destroy(); //销毁地图};useEffect(() {AMapLoader.load({key: e558ae3e565bc8f545a98d88794aada5, // 申请好的Web端开发者Key首次调用 load 时必填version: 2.0, // 指定要加载的 JSAPI 的版本缺省时默认为 1.4.15plugins: [], // 需要使用的的插件列表如比例尺AMap.Scale等}).then(createMap).catch(onCatch);return mountMap;}, []);return (div classNamemapdiv idcontainer style{{ height: 800px }}/divInput idtipinput placeholder请输入搜索内容 //div);
}3.样式
.map {position: relative;.container {padding: 0px;margin: 0px;width: 100%;}#tipinput {position: absolute;left: 10px;top: 10px;width: 200px;}.amap-sug-result {z-index: 9999;visibility: visible;}
}
