最全最新的高德示例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>
想要了解高德地圖用法的小夥伴，想要一起研究地圖的小夥伴，可以下方留言哦~