高德地图搜索经纬度附近地理位置以及标记等

最新推荐文章于 2024-06-06 09:28:03 发布

置顶挨踢小子

最新推荐文章于 2024-06-06 09:28:03 发布

阅读量2.6k

点赞数

分类专栏： Java

本文链接：https://blog.csdn.net/qq_37126357/article/details/102744095

版权

Java 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE HTML>
<html lang="zh">
<meta charset="utf-8"> 
<style>
    .form-group > div {
        margin-bottom: 6px;
        line-height: 34px;
    }
    .form-group input {
        height: 27px;
    }
    #areaRow ul li {
        background: #FFFFFF;
    }
    #areaRow ul li:hover {
        background: #e5e6e7;
    }
    #areaRow li {
        border: 1px solid #e5e6e7;
        line-height: 30px;
        padding-left: 4px;
    }
</style>
<body class="white-bg">
<div style="padding: 20px">
    <div class="left" style="float: left;width: 33%;">
        <div class="form-group">
            <div>
                关键字： <input id="tipinput" type="text">
            </div>
            <div>
                经纬度： <input id='lnglat' type="text" readonly>
            </div>
        </div>
        <div id="areaRow" style="width: 100%;"></div>
    </div>
    <div class="right" style="float: left;width: 60%">
        <div id="container" style="width: 500px;height: 500px"></div>
    </div>
</div> 
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=***您申请的key值***&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
<script type="text/javascript">
    //初始化地图
    var map = new AMap.Map('container', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom: 12, //初始地图级别
    });
    //输入提示
    var auto = new AMap.Autocomplete({
        input: "tipinput"
    });
    var placeSearch = new AMap.PlaceSearch({
        map: map
    });  //构造地点查询类
    AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
    function select(e) {
        var lng = e.poi.location.lng;
        var lat = e.poi.location.lat;
        if (e.poi && e.poi.location) {
            map.setZoom(15);
            map.setCenter(e.poi.location);
            document.getElementById("lnglat").value = lng + "," + lat;
            addMarker(lng, lat);
        }
    }
    //为地图注册click事件获取鼠标点击出的经纬度坐标
    map.on('click', function (e) {
        // document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat();
        if (marker) {
            marker.setMap(null);
            marker = null;
        }
        addMarker(e.lnglat.getLng(), e.lnglat.getLat());
        aMapSearchNearBy([e.lnglat.getLng(), e.lnglat.getLat()]);
    });
    var marker;
    // 实例化点标记
    function addMarker(lng, lat) {
        var icon = new AMap.Icon({
            size: new AMap.Size(19, 31),//图标大小
            imageSize: new AMap.Size(19, 31),
            image: 'https://webapi.amap.com/theme/v1.3/markers/b/start.png',  // Icon的图像
        });
        marker = new AMap.Marker({
            icon: icon,
            position: [lng, lat]
        });
        marker.setMap(map);
    }
    // 高德地图查询周边
    function aMapSearchNearBy(centerPoint) {
        AMap.service(["AMap.PlaceSearch"], function () {
            var placeSearch = new AMap.PlaceSearch({
                pageSize: 10,    // 每页10条
                pageIndex: 1,    // 获取第一页
            });
            // 第一个参数是关键字，这里传入的空表示不需要根据关键字过滤
            // 第二个参数是经纬度，数组类型
            // 第三个参数是半径，周边的范围
            // 第四个参数为回调函数
            placeSearch.searchNearBy('', centerPoint, 1000, function (status, result) {
                if (result.info === 'OK') {
                    var locationList = result.poiList.pois; // 周边地标建筑列表
                    // 生成地址列表html
                    createLocationHtml(locationList);
                } else {
                    console.log('获取位置信息失败!');
                }
            });
        });
    }
    /**
     * 组装Html
     * @param locationList
     */
    function createLocationHtml(obj) {
        //清空里面的文字
        $("#tipinput,#lnglat").val("");
        //生成具体的待选项目html
        var innerHtml = "<ul style='width: 86%'>";
        innerHtml += "<li style='text-align: center;background: #e5e6e7'>附近相关</li>"
        for (var i = 0; i < obj.length; i++) {
            var name = "";
            innerHtml += "<li";
            Object.keys(obj[i]).forEach(function (key) {
                innerHtml += " " + key;
                innerHtml += "=" + obj[i][key];
                innerHtml += "  οnclick=selectInfo(this)";
                name = obj[i]['name'];
            });
            innerHtml += ">" + name + "</li>";
        }
        innerHtml += "</ul>";
        $("#areaRow").html(innerHtml);
    }
    function selectInfo(that) {
        $("#tipinput").val($(that).attr("name"));
        $("#lnglat").val($(that).attr("location"));
        $("#areaRow").html("");
    }
    /*删除处理功能*/
    $("#tipinput").on("keydown", function (e) {
        if (e.keyCode == 8 || e.keyCode == 46) {
            $("#tipinput,#lnglat").val("")
        }
    });
    
</script>
</body>
</html>