老师，我这个为啥不是3D的
来源：8-1 驾车路线
Darkholme
2020-07-13 15:46:30
<!DOCTYPE html>
<html>
<head>
<title>自由编程</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=d4415e660fce862cab9ecff1ece7a2fd&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.ControlBar"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
a{
text-decoration: none;
}
#container {
width:100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
#control{
width: 300px;
height: 300px;
text-align: center;
z-index: 5;
position: absolute;
left: 50px;
top: 50px;
border: 1px solid black;
box-shadow: 0 5px 5px black;
background-color: white;
}
#control a {
font-size: 14px;
color: black;
}
#control input{
width: 50px;
outline: none;
}
.confirm{
outline: none;
width: 40px;
height: 20px;
line-height: 20px;
text-align: center;
background: lightgreen;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="control">
<h3>工具栏</h3>
<label>搜索城市</label>
<input type="text" name="" id="city">
<button class="confirm" id="setCity">确定</button><br>
<!--<label>设置显示级别</label>
<input type="text" name="" id="zoom">
<button class="confirm" id="setZoom">确定</button><br>
<button id="btnCancel">解除范围限制</button><br>
<a href="javascript:void(0);">当前所在省/直辖市：<span></span></a>-->
<div id="search"></div>
</div>
<script type="text/javascript">
var city = document.querySelector('#city'),
setCity = document.querySelector('#setCity'),
zoom = document.querySelector('#zoom'),
setZoom = document.querySelector('#setZoom'),
cancel = document.querySelector('#btnCancel'),
reset = true,
_location = document.querySelector('span');
var map = new AMap.Map('container',{
zoom: 17,
center: [116.379391,39.861536],
viewMode:'3d',
buildingAnimation:true
});
map.addControl(new AMap.ControlBar({
showZoomBar:true,
//showControlButton:true,
position:{
right:'50px',
top:'30px'
}
}));
AMap.service(['AMap.PlaceSearch'],function(){
setCity.onclick =function(){
new AMap.PlaceSearch({
type:'餐饮',
pageSize:5,
pageIndex:1,
panel:'search',
map:map,
cityLimit:true,
}).searchNearBy('火锅',[116.379391,39.861536],1000,function(){
});
}
});
var searchNode = new AMap.Autocomplete({
input:'city'
})
var PlaceSearch = new AMap.PlaceSearch({
map:map
})
AMap.event.addListener(searchNode,'select',function(e){
PlaceSearch.search(e.poi.name)
})
var mk1 = new AMap.Icon({
size:new AMap.Size(500,500),
image:'1.jpg',
imageSize: new AMap.Size(50,50)
//imageOffset: new AMap.Pixel(-10,-10)
});
var mk2 = new AMap.Icon({
size:new AMap.Size(500,313),
image:'2.jpg',
imageSize: new AMap.Size(50,50)
//imageOffset: new AMap.Pixel(-10,-10)
});
var marker = new AMap.Marker({
position:[116.379391,39.861536],
icon:mk1
});
var marker2 = new AMap.Marker({
position:[116.379391,39.851],
icon:mk2
});
//marker.setMap(map);
//marker2.setMap(map);
//添加标记
//map.add([marker,marker2]);
//缩放比例尺控件
//map.addControl(new AMap.Scale());
//工具条控件
//map.addControl(new AMap.ToolBar());
//删除标记方法1：setMap(null)
/*setTimeout(function(){
marker.setMap(null);
},5000);*/
//删除标记方法2：map.remove([])
setTimeout(function(){
map.remove([marker,marker2])
},5000);
/*
map.on('click',function(e){
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(-50,-50)
});
marker.setMap(map);
});*/
/*var myBounds = new AMap.Bounds([116.567542,39.997639],[116.22422,39.813285])
map.setBounds(myBounds);
var bounds = map.getBounds();
bounds.northeast.R=Number(116.567542,39.997639);
bounds.southwest.R=Number(116.22422,39.813285);
map.setLimitBounds(bounds);
setCity.onclick=function(){
map.setCity(city.value);
map.getCity(function(info){
_location.innerHTML = info.city || info.province;
});
}
setZoom.onclick=function(){
map.setZoom(zoom.value);
}
cancel.onclick=function(){
if(reset == true){
map.clearLimitBounds();
cancel.innerHTML = '打开范围限制';
reset = false;
}else{
map.setLimitBounds(bounds);
cancel.innerHTML = '解除范围限制';
reset = true;
}
}
map.on('moveend',function(){
map.getCity(function(info){
_location.innerHTML = info.city || info.province;
});
})
map.on('click',function(e){
map.setCenter([e.lnglat.lng,e.lnglat.lat]);
})*/
</script>
</body>
</html>
2回答
-
好帮手慕码
2020-07-14
同学你好，老师再次测试是没有问题的，如下：
效果：
建议同学将修改后的代码粘贴到问答区进行测试，祝学习愉快~
0 -
好帮手慕码
2020-07-13
同学你好，修改如下：
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0h020-07-14
相似问题