16前端javascript——高德地圖api屬性
阿新 • • 發佈：2020-08-15
-
地圖屬性
-
獲取和設定地圖的中心點和級別
<div id="container"></div>
<div id='setCenterNode'>
<div>x座標 <input type="" name="" id='xNode'></div>
<div>y座標 <input type="" name="" id='yNode'></div>
<div>級別 <input type="text" name="" id='zoomVal'></div><button id='btn'>確定</button>
</div>
<script type="text/javascript">
var map = new AMap.Map('container', {
zoom: 11, //初始的地圖級別
center: [116.45695, 39.928089] //初始化地圖的中心點
});
//moveend地圖移動結束時觸發事件
map.on('moveend',function(){
console.log(map.getZoom());//獲取地圖的級別console.log(map.getCenter().toString());//獲取地圖的中心文職
})
//zoomend地圖級別發生變化觸發事件
map.on('zoomend', function () {
console.log(map.getZoom());
console.log(map.getCenter().toString());
});
//通過輸入值，設c定中心點和級別
btn.onclick = function(){
console.log('設定');
map.setZoomAndCenter(zoomVal.value,[xNode.value,yNode.value]);}
</script> -
獲取和設定地圖的當前行政區
<body>
<div id="container"></div>
<div id='setCenterNode'>
<div id="currentCityNode"></div>
<div>去往城市 <input type="" name="" id='cityNode'></div>
<button id='btn'>確定</button>
</div>
<script type="text/javascript">
var map = new AMap.Map('container', {
zoom: 11, //初始的地圖級別
center: [116.45695, 39.928089] //初始化地圖的中心點
});
//獲取當前行政區
map.getCity(function(info){
console.log(info);
currentCityNode.innerHTML = info.province+','+info.district;
})
//通過輸入值，設c定中心點和級別
btn.onclick = function () {
map.setCity(cityNode.value)
</script>
</body> -
獲取和設定地圖的顯示範圍
<body>
<div id="container"></div>
<div id='setCenterNode'>
<div>地圖的右上角座標:<span id='ne'></span></div>
<div>地圖的左下角座標:<span id='sw'></span></div>
</div>
<script type="text/javascript">
var map = new AMap.Map('container', {
zoom: 11, //初始的地圖級別
center: [116.45695, 39.928089] //初始化地圖的中心點
});
//獲取當前地圖的範圍座標
console.log(map.getBounds());
ne.innerHTML = map.getBounds().northeast.toString();
sw.innerHTML = map.getBounds().southwest.toString();
//設定地圖顯示邊界
var myBounds = new AMap.Bounds([88.379391, 20.861536], [117.379391, 41.861536]);
map.setBounds(myBounds);
console.log(map.getBounds())
</script>
</body> -
設定和解除邊界限制
<body>
<div id="container"></div>
<div id='setCenterNode'>
<input type="" name="" id='xNode'>
<input type="" name="" id='yNode'>
<button id='btn'>確定</button>
<button id="clearbtn">解除限制範圍</button>
</div>
<script type="text/javascript">
var map = new AMap.Map('container', {
zoom: 11, //初始的地圖級別
center: [116.45695, 39.928089] //初始化地圖的中心點
});
//通過btn點選事件確定顯示限制
btn.onclick = function(){
var bounds = map.getBounds();
bounds.northeast.R = Number(xNode.value);
bounds.southwest.R = Number(yNode.value);
map.setLimitBounds(bounds);
}
//通過clear點選事件解除限制
clearbtn.onclick = function(){
map.clearLimitBounds();
}
</script>
</body> -
地圖平移
<body>
<div id="container"></div>
<div id='setCenterNode'>
<div id="xpan"><input type="text" id="xpanval"></div>
<div id="ypan"><input type="text" id="ypanval"></div>
<div id="btn">設定</div>
<div id="tobtn">偏移到</div>
</div>
<script type="text/javascript">
var map = new AMap.Map('container', {
zoom: 11, //初始的地圖級別
center: [116.45695, 39.928089] //初始化地圖的中心點
});
//通過btn按鍵事件觸發設定平移多少畫素
btn.onclick = function(){
x = xpanval.value ;
y = ypanval.value ;
map.panBy(x,y);//平移多少畫素
}
//通過tobtn按鍵事件觸發設定偏移到某個位置
tobtn.onclick = function(){
x = xpanval.value;
y = ypanval.value;
map.panTo([x, y]);//平移☞[x,y]座標
}
</script>
</body> -
獲取經緯度
<body>
<div id="container"></div>
<div id='setCenterNode'>
<div>目前滑鼠的經緯度是:<span id='xyNode'></span></div>
</div>
<script type="text/javascript">
var map = new AMap.Map('container', {
zoom: 11, //初始的地圖級別
center: [116.45695, 39.928089] //初始化地圖的中心點
});
//通過點選事件獲取經緯度
map.on('click',function(e){
console.log(e.lnglat);
xyNode.innerHTML = e.lnglat.lng + ',' + e.lnglat.lat;
})
</script>
</body> -
設定滑鼠樣式
//設定地圖的滑鼠的樣式
map.setDefaultCursor('-webkit-grabbing');
-
-
地圖的常用操作
-
地圖搜尋：需要載入
&plugin=AMap.Autocomplete控制元件-
輸入提示
<body>
<div id="container"></div>
<div id='setCenterNode'>
<input type="" name="" id='searchText'>
<div id="btn">設定</div>
</div>
<script type="text/javascript">
var map = new AMap.Map('container', {
zoom: 11, //初始的地圖級別
center: [116.45695, 39.928089] //初始化地圖的中心點
});
new AMap.Autocomplete({
input:'searchText'
});
</script>
</body> -
輸入提示與poi搜尋相結合
<body>
<div id="container"></div>
<div id='searchNode'>
<input type="" name="" id='searchIpt'>
<button id='btn'>搜尋</button>
</div>
<div id='setCenterNode'>
<script type="text/javascript">
var map = new AMap.Map('container', {
zoom: 11, //初始的地圖級別
center: [116.45695, 39.928089] //初始化地圖的中心點
});
AMap.service(['AMap.PlaceSearch'],function(){
new AMap.PlaceSearch({
type:'住宿',
pageSize:5,
pageIndex:1,
city:'010',
cityLimit:true,
map:map,
panel:'setCenterNode'
}).searchNearBy('北京', [116.379391, 39.861536], 1000, function () { });
})
</script>
</body>
-
-
新增和刪除標記
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new AMap.Map('container', {
zoom: 11, //初始的地圖級別
center: [116.45695, 39.928089] //初始化地圖的中心點
});
//1.建立一個標記並顯示在地圖上
var marker = new AMap.Marker({//建立一個標記
icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', //標記的圖示
position:[116.379391, 39.861536]
});
marker.setMap(map);//標記顯示在map上
//2.通過滑鼠click事件新增標記
map.on('click',function(e){
console.log(e.lnglat);
var marker = new AMap.Marker({
icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', //標記的圖示
position:[e.lnglat.lng,e.lnglat.lat],//標記的座標
offset:new AMap.Pixel(-25,-25)//畫素偏差值
});
marker.setMap(map);//標記顯示在map上
})
//3.新增多個標記
var marker = new AMap.Marker({
icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', //標記的圖示
position: [116.379391, 39.861536], //標記的座標
// offset:new AMap.Pixel(-50,-500) // 畫素的偏差值
});
var marker2 = new AMap.Marker({
icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png', //標記的圖示
position: [116.378391, 39.825536], //標記的座標
// offset:new AMap.Pixel(-50,-500) // 畫素的偏差值
});
map.add([marker,marker2]);
//4.刪除標記
setTimeout(function () {
map.remove([marker, marker2])
}, 5000);
</script>
</body> -
縮放比例尺
plugin=AMap.Scale,AMap.ToolBar<body>
<div id="container"></div>
<script type="text/javascript">
var map = new AMap.Map('container', {
zoom: 11, //初始的地圖級別
center: [116.45695, 39.928089] //初始化地圖的中心點
});
//1.新增比例尺和外掛
map.addControl(new AMap.Scale());
map.addControl(new AMap.ToolBar());
</script>
</body> -
地圖型別轉換2D和3D
<body>
<div id="container"></div>
<script type="text/javascript">
var map = new AMap.Map('container', {
zoom: 17,
pitch: 90,
center: [116.379391, 39.861536],
viewMode: '3D',
buildingAnimation: true
});
map.addControl(new AMap.ControlBar({
showZoomBar: true,
// showControlButton:true,// 可以取消 傾斜旋轉角度的按鈕
position: {
right: '50px',
top: '30px'
}
}))
</script>
</body> -
路線指定
-
駕車路線
&plugin=AMap.Driving,AMap.Autocomplete<body>
<div id="container"></div>
<div id='panel'></div>
<div id='search'>
起點:<input type="" name="" id='startNode'><br>
終點:<input type="" name="" id='endNode'><br>
<button id='btn'>開始導航</button>
</div>
<script type="text/javascript">
var map = new AMap.Map('container', {
zoom: 11,
center: [116.379391, 39.861536],
});
new AMap.Autocomplete({
input: 'startNode'
});
new AMap.Autocomplete({
input: 'endNode'
});
btn.onclick = function () {
var myMap = new AMap.Driving({
map: map,
panel: 'panel'
});
myMap.search([
{ keyword: startNode.value, city: '北京' },
{ keyword: endNode.value, city: '北京' }
], function (status, data) {
console.log(data);
})
};
</script>
</body> -
步行路線
&plugin=AMap.Driving,AMap.Autocompletenew AMap.Walking({
map:map,
panel:'panel'
}).search([[116.379391,39.861536],[116.179391,39.761536],[116.979391,39.561536]],function(status,data){
console.log(data);
}); -
貨車路線
btn.onclick = function(){
new AMap.TruckDriving({
map:map,
panel:'panel',
city:'beijing',
size:1
}).search([
{keyword:startNode.value,city:'北京'},
{keyword:centerNode.value,city:'北京'},
{keyword:endNode.value,city:'北京'}
],function(status,data){
console.log(data);
})
}; -
騎行路線
btn.onclick = function(){
new AMap.Riding({
map:map,
panel:'panel'
}).search([
{keyword:startNode.value,city:'北京'},
{keyword:endNode.value,city:'北京'}
],function(status,data){
console.log(data);
})
}; -
公交路線
btn.onclick = function(){
new AMap.Transfer({
map:map,
panel:'panel'
}).search([
{keyword:startNode.value,city:'北京'},
{keyword:endNode.value,city:'北京'}
],function(status,data){
console.log(data);
})
};
-
-