web端引入高德地图

一、用原始方法引入，对所有web端都可用
先引入一下文件

<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>

使用

var map = new AMap.Map('container', {
        /* 涉及到的布尔类型的属性
        animateEnable:地图平移过程中是否使用动画（默认为true）
        resizeEnable：是否监控地图容器尺寸变化（默认为false）
        isHotspot：是否开启地图热点和标注的hover效果（PC端默认为true，移动端默认为false） 
        rotateEnable：地图是否可旋转（3D视图默认为true，2D视图默认为false）
        dragEnable：地图是否可通过鼠标拖拽平移（默认为true）
        zoomEnable：地图是否可缩放（默认为true）
        doubleClickZoom：地图是否可通过双击鼠标放大地图（默认为true）
        keyboardEnable：地图是否可通过键盘控制（默认为true）
        jogEnable：地图是否使用缓动效果（默认为true）
        scrollWheel：地图是否可通过鼠标滚轮缩放浏览（默认为true）
        touchZoom：地图在移动终端上是否可通过多点触控缩放浏览地图（默认为true）
        showBuildingBlock: 地图显示3D楼块效果，移动端也可使用（默认为true） 【注】实测结果，语言类型为中文时才生效
        pitchEnable: 地图能否调节俯仰角度（3D视图默认为true，2D视图下无效）
        buildingAnimation: 楼块出现和消失的时候是否显示动画过程（3D视图有效，PC端默认为true，手机端默认为false） */
       
        // 地图默认的缩放级别，zooms属性可以用数组来规定缩放范围，PC端默认为[3,18]，取值范围[3-18]；移动端默认为[3,19],取值范围[3-19]
        zoom: 13,
        // 中心点经纬度坐标（默认为所在市区）
        center: [121.48612, 31.24166],
        // 使用3D视图（默认为2D）
        viewMode:'3D',
        // 地图俯仰角度（默认为0），取值范围为[0,83]，2D地图下无效
        pitch:30,
        // 地图语言类型（默认为中文简体），可取值：'zh_cn'（中文简体），'en'（英文），zh_en中英文双语
        lang: 'zh_cn'          
    });
<div id="container"></div>

这里做一个简单的导航功能

//基本地图加载
        const map = new AMap.Map("container", {
            resizeEnable: true,
            center: [116.397428, 39.90923],//地图中心点
            zoom: 13 //地图显示的缩放级别
        });
        //构造路线导航类
        const driving = new AMap.Driving({
            map: map,
            panel: "panel"
        });
        // 根据起终点经纬度规划驾车导航路线
        driving.search(
        	new AMap.LngLat(121.274372,31.0480719 ), 
        	new AMap.LngLat( 121.52311,31.205176 ), 
        	function (status, result) {
           		 // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
           		 if (status === 'complete') {
            	} else {
            	}
        });
 <div id="container" style={{ width: '100%', height: '100%' }}></div>
<div id="panel" style={{display:'none'}}></div>

二、react项目里引用高德地图
react-amap 是一个基于 React 封装的高德地图组件，访问官网地址
https://elemefe.github.io/react-amap/articles/start ，可使用react-amap以及它的扩展组件