设定坐标报错
来源：3-7 设置地图的范围
崔浩晟
2020-01-20 17:48:42
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个高德地图</title>
<!-- 异步引入方式生成地图 -->
<!-- <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=542a4ed2118957fdb0f67d359b3cf2a3&callback=init"></script> -->
<!-- 同步引入方式生成地图 -->
<!-- <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=542a4ed2118957fdb0f67d359b3cf2a3"></script> -->
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#container {
width:100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.setZoomNode{
position: absolute;
top: 3%;
left: 70%;
z-index: 10;
width: 500px;
height: auto;
background-color: white;
border: 1px solid #dddddd;
box-shadow: 0 0 10px;
border-radius: 8px;
}
.zoomStyle{
margin: 6px 0 6px 8px;
}
.setZoomNode label{
color: #000000;
font-weight: bold;
font-size: 14px;
padding: 0 5px 0 0;
}
#address{
display: inline;
}
#NE{
display: inline;
}
#SW{
display: inline;
}
</style>
</head>
<body>
<div id="container">
<div class="setZoomNode">
<div class="zoomStyle">
<label>级别设置</label><input id="setZoomVal" type="text"/>
<button id="mapBtn">确定</button>
<button id="zoomAndCenterBtn">同时设置级别和中心点</button>
</div>
<div class="zoomStyle">
<label>中心点设置</label><input id="setCenterValX" type="text"/><input id="setCenterValY" type="text"/>
<button id="centerBtn">确定</button>
</div>
<div class="zoomStyle">
<label>地址</label><div id="address"></div>
</div>
<div class="zoomStyle">
<label>设置行政区</label><input id="setCity" type="text"/>
<button id="cityBtn">确定</button>
</div>
<div class="zoomStyle">
<label>获取坐标点东北</label><input id="NE" type="text" /><br/>
<label>获取坐标点西南</label><input id="SW" type="text" />
<button id="locationBtn">确定</button>
</div>
</div>
</div>
<script>
// 同步引入方式生成地图
// new AMap.Map('container')
// 异步引入方式生成地图
// window.init = function(){
// new AMap.Map('container')
// }
// 动态生成地图
window.onload = function(){
// zoom级别
var map = new AMap.Map('container',{
zoom:10,
// center:[101,30]
})
//设置地图显示范围
locationBtn.onclick = function(){
var myBounds = new AMap.Bounds([NE.value],[SW.value])
map.setBounds(myBounds)
}
//获取行政区
map.getCity(function(info){
var city = info.city != '' ? info.city : info.province
setCity.value = city
})
//获取级别
setZoomVal.value = map.getZoom()
map.getCity(function(info){
console.log(info.province+info.district+info.city+info.citycode)
address.innerHTML = info.province+info.district+info.city+" 区号"+info.citycode
})
console.log(map.getZoom())
console.log(map.getCenter().toString())
//获取中心点
setCenterValX.value = map.getCenter().Q
setCenterValY.value = map.getCenter().P
// 移动停止后，监听
map.on('moveend',function(){
console.log(map.getZoom())
console.log(map.getCenter().toString())
//获取当前位置的行政区、
map.getCity(function(info){
console.log(info.province+info.district+info.city+info.citycode)
address.innerHTML = info.province+info.district+info.city+" 区号"+info.citycode
//获取当前地图的坐标范围
NE.value = map.getBounds().northeast.toString();
SW.value = map.getBounds().southwest.toString();
//获取级别
setZoomVal.value = map.getZoom()
//获取中心点
setCenterValX.value = map.getCenter().Q
setCenterValY.value = map.getCenter().P
//获取行政区
map.getCity(function(info){
var city = info.city != '' ? info.city : info.province
setCity.value = city
})
})
})
map.on('zoomend',function(){
console.log(map.getZoom())
console.log(map.getCenter().toString())
})
//设置地图级别
// setTimeout(function(){
// map.setZoom(8)
// },5000)
// 设置级别
mapBtn.onclick = function(){
map.setZoom(setZoomVal.value)
}
// 设置中心点
centerBtn.onclick = function(){
map.setCenter([setCenterValX.value,setCenterValY.value])
}
//设置级别和中心点
zoomAndCenterBtn.onclick = function(){
map.setZoomAndCenter(setZoomVal.value,[setCenterValX.value,setCenterValY.value])
}
//设置行政区
cityBtn.onclick = function(){
map.setCity(setCity.value)
}
// 获取当前地图的范围坐标点
NE.value = map.getBounds().northeast.toString();
SW.value = map.getBounds().southwest.toString();
}
var jMap = document.createElement('script');
jMap.src = 'https://webapi.amap.com/maps?v=1.4.15&key=542a4ed2118957fdb0f67d359b3cf2a3';
document.head.appendChild(jMap);
</script>
</body>
</html>
1回答
-
同学你好， 针对你的问题，解答如下：
因为设置坐标的数据格式不对，导致设置坐标报错。建议修改：
同学自己测试一下
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题
回答 1
回答 2