react调用高德地图api实现地图_react项目高德地图api

1.注册高德地图api账号

注册完成后进行登录

2.新建并获取key和密钥

访问我的应用创建新应用

3.下载高德地图api加载模块

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

4.react中的代码

可以通过访问坐标拾取器功能进行坐标位置查找

import React, { useEffect, useMemo, useRef, useState } from 'react'
import AMapLoader from '@amap/amap-jsapi-loader';
import './App.css'
window._AMapSecurityConfig = {
  securityJsCode: "密钥"
};
function App(props) {
  //初始化地图
  const initMap = () => {
    AMapLoader.load({
      key: "key", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0",              // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ['AMap.Riding','AMap.DrivingPolicy.LEAST_FEE', 'AMap.LngLat', 'AMap.Map', 'AMap.Polyline', 'AMap.PolylineEditor'],// 需要使用的的插件列表，如比例尺'AMap.Scale'等
    }).then((AMap, log) => {
      let map = new AMap.Map("container", { //设置地图容器id
        center: ['地图打开时的中心位置坐标'],
        zoom: 14
      });
      var ridingOption = {
        map: map,
        panel: "panel",
        policy: 2,
        hideMarkers: false, 
        isOutline: true,
        outlineColor: 'blue',
        autoFitView: true,
      }
      var riding = new AMap.Riding(ridingOption)
      //根据起终点坐标规划骑行路线
      const zuoOne = new AMap.LngLat('起始位置坐标')
      const zuoTwo = new AMap.LngLat('终点位置坐标')
       riding.search(zuoOne, zuoTwo, function (status, result) {
        if (status === 'complete') {
          // log.success('骑行路线数据查询成功')
          console.log("成功");
          const route = result.routes[0];
          const time = route.time/60;
          let timer = time.toString();
          console.log(timer.split('.')[0]);
          // console.log(`骑行路线的时间为：${time} 分钟`);
        } else {
          // log.error('骑行路线数据查询失败' + result)
          console.log(result, "为什么失败啊");
        }
      });
    }).catch(e => {
      console.log(e);
    })
  }
 
  useEffect(function () {
    initMap()
  }, [])
  return (
    <>
      <div id="container" style={{ width: '100%', height: '800px' }}>
      </div>
      <div id="panel"></div>
    </>
  );
}
 
 
export default App;
 

此案例以骑行路线为例，可以更改为步行路线规划、公交路线规划、货车路线规划，访问服务-路线规划功能，可以按照自己的需求进行更改

可以通过访问路径规划查看详细的参数作用，自行进行更改

5.css样式代码

#container {
  width: 100%;
  height: 100%;
}
#panel {
  position: fixed;
  background-color: white;
  max-height: 40%;
  overflow-y: auto;
  top: 10px;
  right: 10px;
  width: 200px;
}
#panel .amap-lib-driving {
  border-radius: 4px;
  overflow: hidden;
}

有疑问欢迎私信和评论，如有帮助记得点赞和关注哦