您的位置：首页 > Web前端 > JavaScript

高德地图 Javascript web API 1.3根据输入的地址搜索位置的经纬度编码

2017-05-25 14:26 225 查看

这两种情况都要首先引入高德地图api的javascript

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=你申请的key"></script>

第一种情况根据输入的地点去手动搜索地图：

jsp页面

<title>地理定位</title>
</head>
<body class="easyui-layout" onload="initMap();">
<div data-options="region:'north' ,title:'',iconCls:'icon-tip'" style="height:34px">
<div id="r-result">
请输入待定位地址:<input type="text" id="suggestId" size="20" placeholder="请输需要查询的地址" style="width:150px;" />
<a href="javascript:void(0)" onclick="lacationOk();" class="easyui-linkbutton" iconCls="icon-search" plain="true">搜索</a>
<a href="javascript:void(0)" onclick="lacationClr();" class="easyui-linkbutton" iconCls="icon-cut" plain="true">清除</a>
<a href="javascript:void(0)" onclick="lacationRedo();" class="easyui-linkbutton" iconCls="icon-redo" plain="true">恢复</a>
</div>
</div>
<div data-options="region:'center',title:'',iconCls:'icon-tip',border:false">
<div id="container"></div>
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
</div>
</body>

javacript:
var map,marker;
var point;
var oldPoint;
var ac ;//建立一个自动完成的对象
var myValue;
var MGeocoder;
var suggestId;
function lacationOk() { //地理编码返回结果展示
if (marker) {
marker.setMap(null);
marker = null;
}
suggestId = document.getElementById("suggestId").value;
//alert(suggestId);
map.plugin(["AMap.Geocoder"], function() { //加载地理编码插件
MGeocoder = new AMap.Geocoder({
city:"", //城市，默认：“全国”
//radius:1000 //范围，默认：500
});
//地理编码
MGeocoder.getLocation(suggestId, function(status, result) {
if (status === 'complete' && result.info === 'OK') {
//TODO:获得了有效经纬度，可以做一些展示工作
//比如在获得的经纬度上打上一个Marker
var lng = result.geocodes[0].location.lng; //获取经度
var lat = result.geocodes[0].location.lat; //获取纬度
marker = new AMap.Marker({
position: [lng,lat],
title: result.geocodes[0].formattedAddress,
map: map,
draggable:true,
raiseOnDrag:true,
});
//alert(JSON.stringify(result));
}else{
//获取经纬度失败
}
});

});
}

第二种情况就是根据用户在输入框输入的字自动完成的文本框
页面一样不一样的Javascript了

//创建地图函数：
function createMap(){
marker = new AMap.Marker();
map = new AMap.Map('container');
map.setZoom(7);
map.setCenter([113.264434, 23.129162]);
//建立一个自动完成的对象
map.plugin('AMap.Autocomplete',function(){//回调函数
var autoOptions = {
city: "", //城市，默认全国
input:"suggestId"//使用联想输入的input的id
};
var autocomplete= new AMap.Autocomplete(autoOptions);
AMap.event.addListener(autocomplete, "select", function(data){
var lng = data.poi.location.lng; //获取经度
var lat = data.poi.location.lat; //获取纬度
//搜索下一个之前把前一个标注给去掉
if(marker!=null&&marker!=''){
marker.setMap(null);
}
//重新自动标注
marker = new AMap.Marker({
position: [lng,lat],
title: data.poi.district+"["+data.poi.name+"]",
map: map,
draggable:true,
raiseOnDrag:true,
});
});
});

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航