最全最新的高德示例Demo,本Demo展示了2D和3D相结合 用到的功能有以下几点：
1.网格多边形标绘，多边形的事件鼠标悬停其上
2.点标记，点标记的点击事件
3.3D地图的控制罗盘
4.3D地图立体多边形绘制
5.两点位置间的路线规划
6.高级用法gitf模型的嵌入
7.自定义地图样式
话不多说介绍完，直接撸代码，附上效果图，以下代码直接复制便可使用.........
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<style>
html,
body,
#container {
width: 100%;
height: 100%;
}
#panel {
position: fixed;
background-color: white;
max-height: 90%;
overflow-y: auto;
top: 10px;
right: 10px;
width: 280px;
}
#panel .amap-call {
background-color: #009cf9;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
#panel .amap-lib-driving {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
overflow: hidden;
}
</style>
<title>位置经纬度 + 获取驾车规划数据</title>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" target="_blank" rel="external nofollow" />
<script src="https://webapi.amap.com/maps?v=1.4.15&key=c8081043919342b03c3d349b7b46a1ea&plugin=AMap.MouseTool,AMap.Driving,Map3D,AMap.ControlBar,AMap.GltfLoader,AMap.DistrictSearch,AMap.Driving"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
</head>
<body>
<div id="container"></div>
<div id="panel"></div>
<script type="text/javascript">
var map = new AMap.Map("container", {
viewMode: '3D',
center: [116.397559, 39.89621],
zoom: 14
});
//设置地图的底层样式
map.setMapStyle('amap://styles/73c16e38c8a5edd1ca72df3d0a00c6ba');
// 添加 3D 罗盘控制
map.addControl(new AMap.ControlBar({
showZoomBar:true,
showControlButton:true,
position:{
left:'5px',
top:'10px'
}
}))
var drivingOption = {
policy: AMap.DrivingPolicy.LEAST_TIME, // 其它policy参数请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingPolicy
ferry: 1, // 是否可以使用轮渡
province: '京', // 车牌省份的汉字缩写
map: map,
panel: 'panel'
}
// 构造路线导航类
var driving = new AMap.Driving(drivingOption)
// 根据起终点经纬度规划驾车导航路线
driving.search(new AMap.LngLat(117.201543,39.085312), new AMap.LngLat(117.229051,39.067089), function(status, result) {
// result 即是对应的驾车导航信息，相关数据结构文档请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
if (status === 'complete') {
log.success('绘制驾车路线完成')
} else {
log.error('获取驾车数据失败：' + result)
}
});
//绘制2D网格
var polygonArr = [
[117.204318,39.088504],
[117.208009,39.083874],
[117.197666,39.079477],
[117.194405,39.082708]
]
var polygon = new AMap.Polygon({
path: polygonArr,//设置多边形边界路径
strokeColor: "#f9f100", //线颜色
strokeOpacity: 1, //线透明度
strokeWeight: 5, //线宽
fillColor: "#dde5e9", //填充色
fillOpacity: 0.5,//填充透明度
});
polygon.setMap(map);
// 鼠标滑过区域名称显示
polygon.on('mouseover', function() {
// 添加至 3D 图层
object3Dlayer.add(prism);
});
// 鼠标滑出区域名称显示
polygon.on('mouseout', function() {
// 添加至 3D 图层
object3Dlayer.remove(prism);
});
// 设置光照
map.AmbientLight = new AMap.Lights.AmbientLight([1, 1, 1], 0.5);
map.DirectionLight = new AMap.Lights.DirectionLight([0,-1,2],[1,0,0],0.5);
var object3Dlayer = new AMap.Object3DLayer();
map.add(object3Dlayer);
var colors = ['#0088ffcc','#ff33dc','#33ffaa','#e9ff33','#ff6233','#ba33ff','#d6aeb5','#0088ffcc'];
var bounds = [
[//大圈
new AMap.LngLat(116,39),
new AMap.LngLat(117,39),
new AMap.LngLat(117,40),
new AMap.LngLat(116,40)
],
[//洞1
new AMap.LngLat(116.5,39.25),
new AMap.LngLat(116.75,39.5),
new AMap.LngLat(116.5,39.75),
new AMap.LngLat(116.25,39.5)
],
[//洞2
new AMap.LngLat(116.75,39.75),
new AMap.LngLat(116.9,39.5),
new AMap.LngLat(116.9,39.75)
],
[//岛1
new AMap.LngLat(117.5,39.25),
new AMap.LngLat(117.75,39.5),
new AMap.LngLat(117.5,39.75),
new AMap.LngLat(117.25,39.5)
],[//岛2
new AMap.LngLat(118.5,39.25),
new AMap.LngLat(118.75,39.5),
new AMap.LngLat(118.5,39.75),
new AMap.LngLat(118.25,39.5)
],[//天津市政府
new AMap.LngLat(117.201373,39.084457),
new AMap.LngLat(117.201599,39.084632),
new AMap.LngLat(117.201802,39.084349),
new AMap.LngLat(117.200912,39.083857),
new AMap.LngLat(117.200703,39.084074),
new AMap.LngLat(117.200896,39.084236),
new AMap.LngLat(117.200992,39.084174),
new AMap.LngLat(117.201443,39.084428)
],[//天津经贸中心
new AMap.LngLat(117.204195,39.085027),
new AMap.LngLat(117.204635,39.084511),
new AMap.LngLat(117.204275,39.084311),
new AMap.LngLat(117.204603,39.08387),
new AMap.LngLat(117.203508,39.08327),
new AMap.LngLat(117.202714,39.08419)
],[//天津大区域
new AMap.LngLat(117.204318,39.088504),
new AMap.LngLat(117.208009,39.083874),
new AMap.LngLat(117.197666,39.079477),
new AMap.LngLat(117.194405,39.082708)
]
]
//封装3D模块将纬度
var height = 2000;
for (var i = 0; i < bounds.length; i++) {
//颜色
var color = colors[i]; // rgba
//3D模块
var prism = new AMap.Object3D.Prism({
path:bounds[i],
height:height,
color:color
});
prism.transparent = true;
object3Dlayer.add(prism);
//文字
var text = new AMap.Text({
text: '市政府(点我触发)',
verticalAlign: 'bottom',
position: [117.201309,39.084257],
height: 2100,
style: {
'background-color': 'transparent',
'-webkit-text-stroke': 'red',
'-webkit-text-stroke-width': '0.5px',
'text-align': 'center',
'border': 'none',
'color': 'white',
'font-size': '10px',
'font-weight': 300
}
});
text.setMap(map);
// 标注点击事件
text.on('click', function() {
alert("文字点击事件！！");
});
// 鼠标滑过区域名称显示
text.on('mouseover', function() {
// 添加至 3D 图层
object3Dlayer.add(prism);
});
// 鼠标滑出区域名称显示
text.on('mouseout', function() {
// 添加至 3D 图层
object3Dlayer.remove(prism);
});
};
//gift模型添加
map.plugin(["AMap.GltfLoader"], function () {
var urlCity = 'https://a.amap.com/jsapi_demos/static/gltf-online/shanghai/scene.gltf';
var urlDuck = 'https://a.amap.com/jsapi_demos/static/gltf/Duck.gltf';
var paramCity = {
position: new AMap.LngLat(117.249051,39.067089), // 必须
scale: 3580, // 非必须，默认1
height: 1800, // 非必须，默认0
scene: 0, // 非必须，默认0
};
var paramDuck = {
position: new AMap.LngLat(117.229051,39.067089), // 必须
scale: 800, // 非必须，默认1
height: -100, // 非必须，默认0
scene: 0, // 非必须，默认0
};
var gltfObj = new AMap.GltfLoader();
gltfObj.load(urlCity, function (gltfCity) {
gltfCity.setOption(paramCity);
gltfCity.rotateX(90);
gltfCity.rotateZ(120);
object3Dlayer.add(gltfCity);
});
gltfObj.load(urlDuck, function (gltfDuck) {
gltfDuck.setOption(paramDuck);
gltfDuck.rotateX(90);
gltfDuck.rotateZ(-20);
object3Dlayer.add(gltfDuck);
});
});
</script>
</body>
</html>
想要了解高德地图用法的小伙伴，想要一起研究地图的小伙伴，可以下方留言哦~