高德地图 js 地址+地址任意标点获取经纬度经纬度获取地址

最新推荐文章于 2024-06-12 13:50:24 发布

小啊刚

最新推荐文章于 2024-06-12 13:50:24 发布

阅读量4.1k

点赞数

本文链接：https://blog.csdn.net/xiao_a_gang/article/details/84991706

版权

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<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>

   <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=申请的key，一定要要用webjs类型的key不要用错key"></script>
   
   <script src="http://webapi.amap.com/ui/1.0/main.js"></script>
   <script type="text/javascript" src="http://webapi.amap.com/demos/js/liteToolbar.js"></script>
   <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
   <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
   <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<style>
html,body,#container{
height:100%;
}
</style>
</head>
<body>
<div id="container" ></div>
   <div style="position:absolute;top:20px;left:200px;">
       <span>经度:</span>
       <input name="lon">
       <span>纬度:</span>
       <input name="lat">
       <span>地址:</span>
       <input name="resourceAddress" id="address" style="width:350px;">
       <button οnclick="markLocation()">搜索</button>
   </div>
<script>
var map,addMarker;
var geocoder;
var placeSearch;
var lnglatXY;
$(function(){
// 加入高的地图
map = new AMap.Map('container', {
resizeEnable: true,
zoom:15
/*center: [116.397428, 39.90923] */
});
AMap.plugin(['AMap.ToolBar','AMap.Scale'],
function(){
map.addControl(new AMap.ToolBar());

map.addControl(new AMap.Scale());
});
AMap.service('AMap.Geocoder',function(){//回调函数
//实例化Geocoder
geocoder = new AMap.Geocoder({
city: "重庆",//城市，默认：“全国”
adius : 1000
});
//TODO: 使用geocoder 对象完成相关功能
});
// 加载搜索列表
myMapViewLocation();
AMap.service(["AMap.PlaceSearch"], function() {
placeSearch = new AMap.PlaceSearch({ //构造地点查询类
pageSize: 5,
pageIndex: 1,
city: "重庆", //城市
map: map,
panel: "panel"
});
});
//为地图注册click事件获取鼠标点击出的经纬度坐标
var clickEventListener = map.on('click', function(e) {
$("input[name=lon]").val(e.lnglat.lng);
$("input[name=lat]").val(e.lnglat.lat);
// 填写地址
writeAddress([e.lnglat.lng,e.lnglat.lat]);
mapsearch();
});
//placeSearch.search("北京");
$("#address").on("keydown",function(event){
if(event = event || window.event){
if(event.keyCode==13){
markLocation();
}
}
});
});

//地图搜索
function mapsearch(){
var mlon = $("input[name=lon]").val();
var mlat = $("input[name=lat]").val();
myMapViewLocation(mlon, mlat);
}

// 回显
function myMapViewLocation(mlon, mlat){
//console.log("回显坐标");
if(mlon&&mlat){
//removeMarkers(lnglatXY);
lnglatXY = [mlon,mlat];
addMarker(lnglatXY);
}
}

//移除之前的标点
function removeMarkers(lnglatXY){
   marker = new AMap.Marker({
map: map,
position: lnglatXY,
icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
       offset: new AMap.Pixel(-13, -30)
});
   var markers = [];
   markers.push(marker);
map.remove(markers);
}

// 填写地址
function writeAddress(lnglatXY){
var geocoder = new AMap.Geocoder({
city : "重庆", //城市，默认：“全国”
radius : 1000 //范围，默认：500
});
geocoder.getAddress(lnglatXY, function(status, result) {
if (status === 'complete' && result.info === 'OK') {
geocoder_CallBack(result);
}
});
}

// 地址回调
function geocoder_CallBack(data) {
var address = data.regeocode.formattedAddress; //返回地址描述
$("input[name=resourceAddress]").val(address);
}

//根据地址搜索
function markLocation() {
var address = $("#address").val();
AMap.plugin('AMap.Geocoder', function() {
var geocoder = new AMap.Geocoder();
geocoder.getLocation(address, function(status, result) {
if (status === 'complete' && result.info === 'OK') {

// 经纬度
var lon = result.geocodes[0].location.lng;
var lat = result.geocodes[0].location.lat;

               $("input[name=lon]").val(lon);
$("input[name=lat]").val(lat);

               lnglatXY = [lon, lat];
addMarker(lnglatXY);
} else {
console.log('定位失败！');
}
});
});
}
</script>
</body>
</html>

小啊刚

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
高德地图 js 地址+地址任意标点获取经纬度经纬度获取地址

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;meta name
复制链接

扫一扫