高德地图搜索点击反馈

最新推荐文章于 2022-10-21 11:52:38 发布

迷失的鹿hold

最新推荐文章于 2022-10-21 11:52:38 发布

阅读量797

点赞数

分类专栏： javascript 文章标签： javascript jq

本文链接：https://blog.csdn.net/ATYZ123/article/details/79631282

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

高德api
页面加载完成/提示框选中/点击地图根据经纬度获取并设置地址

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

<title>小区显示地图</title>
<%@ include file="/WEB-INF/jsp/common/public.jsp"%>
<%-- <link rel="stylesheet" type="text/css" href="${s}/css/map.css" /> --%>
<meta name="keywords" content="H-ui.admin v3.0,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
<meta name="description" content="H-ui.admin v3.0，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">
<link rel="stylesheet" type="text/css" href="${s}/css/AMap.css" />
</head>
<body>
<div id="container"></div>
<div id="myPageTop">
    <table>
        <tr>
            <td>
                <label>按关键字搜索：</label>
            </td>

        </tr>
        <tr>
            <td>
                <input type="text" placeholder="请输入关键字进行搜索" value='${community.communityName }' id="tipinput" class="input-text" />
            </td>
        </tr>
        <tr>
         <td>
                <label>左击获取地址信息：</label>
         </td>
        </tr>
        <tr>
        <td>
<!--                 <input type="text" id="input" disabled="disabled" /> -->
                <span id="addr"></span>
            </td>
        </tr>
    </table>
</div>
<script type="text/javascript" src="${s}/js/AMap/addToolbar.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.2&key=key"></script>
<script type="text/javascript">
var x ='${empty x?community.addrLatitude : x }',y='${empty y ?community.addrLongitude :y }';
var cName = '${cName}';


var map = new AMap.Map("container", {
    resizeEnable: true,
    zoom: 15
});
AMap.plugin(['AMap.Autocomplete','AMap.Geocoder'],function(){

    if('0E-7' != x && '0E-7' != y)
    {
        map.setCenter([y,x]);
    }
    else{
        map.setCity(cName);
    }
    //为地图注册click事件获取鼠标点击出的经纬度坐标
    var clickEventListener = map.on('click', function(e) {
           marker.setPosition(e.lnglat);
           loadAddr(e.lnglat);
        // 经纬度
//      document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
    });

    var completeEventListener = map.on('complete', function() {
        if('0E-7' != x && '0E-7' != y)
        {
            loadAddr(map.vh.center);
        }
    });


    // 根据经纬度获取地址
    function loadAddr(location){
         console.log(location);
         geocoder.getAddress(location,function(status,result){
             if(status=='complete'){
                document.getElementById('addr').innerHTML = result.regeocode.formattedAddress
             }
         })
         parent.y = location.getLng();
         parent.x = location.getLat()
         parent.document.getElementById("position").innerHTML=parent.x+','+parent.y+'(已设置)';
         console.log(parent.document.getElementById("position").innerHTML);
    }

    // 地图标点
    var marker = new AMap.Marker({
         map:map,
         bubble:true
     })

    //地理编码与逆地理编码服务，提供地址与坐标间的相互转换
    var geocoder = new AMap.Geocoder({
         city: '010'//城市，默认：“全国”
     });

    var auto = new AMap.Autocomplete({
        input: "tipinput",
        city: cName
    });

    AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发

    function select(e) {
            if (e.poi && e.poi.location) {
                map.setZoom(15);
                map.setCenter(e.poi.location);
                marker.setPosition(e.poi.location);
                loadAddr(e.poi.location);
            }
    }
});

</script> 

<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>

迷失的鹿hold

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
高德地图搜索点击反馈

高德api 页面加载完成/提示框选中/点击地图根据经纬度获取并设置地址&lt;!DOCTYPE HTML&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;meta name="renderer" content="webkit|ie-comp|ie-stand"&gt;&lt
复制链接

扫一扫

专栏目录