16前端javascript——高德地图api属性
-
地图属性
-
获取和设置地图的中心点和级别
<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);
})
};
-
-
