|
发表帖子
API/SDK版本号: |
http://webapi.amap.com/maps?v=1.3 |
产品: |
搜索 |
手机型号: |
|
使用接口: |
AMap.Autocomplete |
代码如下:
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>选取地图坐标</title>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script type="text/javascript"
src="http://webapi.amap.com/maps?v=1.3&key=xxxxxxxxxxxxxxxxxxxxxx"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<div id="myPageTop">
<table>
<tr>
<td>
<label>按关键字搜索:</label>
</td>
<td class="column2">
<label>点击地图或者手工输入经纬度:</label>
</td>
</tr>
<tr>
<td>
<input type="text" placeholder="请输入关键字" id="search_input">
</td>
<td class="column1">
经度: <input type="text" id="lnglat">
</td>
<td class="column1">
纬度: <input type="text" id="lnglat2">
</td>
</tr>
<tr>
<td>
<input type="button" id = "sure" value = "经纬度确认">
</td>
</tr>
</table>
</div>
<script type="text/javascript">
var map = new AMap.Map("container", {
//center: [121.896027,39.23549],
resizeEnable: true
});
var marker = new AMap.Marker();
AMap.event.addListener(marker,'click',function(e){
document.getElementById("lnglat").value = e.lnglat.lng ;
document.getElementById("lnglat2").value = e.lnglat.lat;
});
//console.log(new AMap.PlaceSearch())
//为地图注册click事件获取鼠标点击出的经纬度坐标
var clickEventListener = map.on('click', function(e) {
document.getElementById("lnglat").value = e.lnglat.getLng();
document.getElementById("lnglat2").value = e.lnglat.getLat();
//设置经度
window.opener.$('2052').value = e.lnglat.getLng();
//设置纬度
window.opener.$('2053').value = e.lnglat.getLat();
/*
// 设置缩放级别和中心点
map.setZoomAndCenter(15, [e.lnglat.getLng(),e.lnglat.getLat()]);
// 在新中心点添加 marker
var marker = new AMap.Marker({
map: map,
position: [e.lnglat.getLng(),e.lnglat.getLat()]
});
*/
map.setZoomAndCenter(15, [e.lnglat.getLng(),e.lnglat.getLat()]);
marker.setMap(map);
var a = [e.lnglat.getLng(),e.lnglat.getLat()];
marker.setPosition(a);
//window.close();
});
AMap.OnInfoWindowClickListener
map.plugin('AMap.Autocomplete',function(){//回调函数
var autoOptions = {
city: "", //城市,默认全国
input:"search_input"//使用联想输入的input的id
};
var autocomplete= new AMap.Autocomplete(autoOptions);
AMap.event.addListener(autocomplete, "select", function(e){
//TODO 选择后的处理程序,data的格式见 附录
if (e.poi && e.poi.location) {
map.setZoom(15);
map.setCenter(e.poi.location);
}
// 设置缩放级别和中心点
map.setZoomAndCenter(15, [e.poi.location.lng,e.poi.location.lat]);
// 在新中心点添加 marker
var marker = new AMap.Marker({
map: map,
position: [e.poi.location.lng,e.poi.location.lat]
});
AMap.event.addListener(marker,'click',function(e){
document.getElementById("lnglat").value = e.lnglat.lng;
document.getElementById("lnglat2").value = e.lnglat.lat;
//设置经度
window.opener.$('2052').value = e.lnglat.lng;
//设置纬度
window.opener.$('2053').value = e.lnglat.lat;
});
});
});
document.getElementById("sure").onclick = function (){
//设置经度
window.opener.$('2052').value = document.getElementById("lnglat").value;
//设置纬度
window.opener.$('2053').value = document.getElementById("lnglat2").value;
window.opener.$('2052').onchange();
window.close();
};
/**
* 经度添加校验
*/
document.getElementById("lnglat").onchange = function(){
// 经度校验
this.value = this.value.replace(/\s+/g, "");
if(isNaN(this.value) || Number(this.value) > 180 || Number(this.value) < -180){
alert("经度输入-180~180之间的数字");
this.value = "";
return false;
};
};
/**
* 纬度添加校验
*/
document.getElementById("lnglat2").onchange = function(){
// 纬度校验
this.value = this.value.replace(/\s+/g, "");
if(isNaN(this.value) || Number(this.value) > 180 || Number(this.value) < -180){
alert("纬度输入-90~90之间的数字");
this.value = "";
return false;
};
};
</script>
</body>
</html>
报错如下:
在我搜索“武坪乡”的时候,回调中返回的e.poi是有问题的。
- poi: {id: "", name: "武坪乡", district: "甘肃省甘南藏族自治州舟曲县", adcode: "623023", location: "", …}
[color=rgb(51, 102, 153) !important]复制代码
,location是空的,注意id也是空。
但是我搜索其他,比如“武坪村”就没问题,正常返回的结果应该是这样(ID和location都有值):
- poi: {id: "B0332007CE", name: "武坪村", district: "四川省达州市渠县", adcode: "511725", location: c, …};
[color=rgb(51, 102, 153) !important]复制代码
location如下:
- location:c {O: 30.898699, M: 106.86323700000003, lng: 106.863237, lat: 30.898699}
[color=rgb(51, 102, 153) !important]复制代码
还有其他类似所有也有部分地址是这样,为什么,请各位大大指点,搞不明白了!多谢。
|
|