一、用原始方法引入,对所有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以及它的扩展组件