地图项目点击地图选点

最新推荐文章于 2024-07-30 10:56:44 发布

sclbk

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量109

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/sclbk/article/details/132401913

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=0250860ccb5953fa5d655e8acf40ebb7&plugin=AMap.Geocoder"></script>
    <style>
        #iMap {
            height: 450px;
            width: 800px;
            position: absolute;
            margin-left: 100px;
            margin-top: 15px;
            margin-bottom: 25px;
            z-index: 999999;
        }

        .info {
            float: left;
            margin: 0 0 0 10px;
        }

        label {
            width: 80px;
            float: left;
        }

        .detail {
            padding: 10px;
            border: 1px solid #aaccaa;
        }

        .layui-btn-te {
            margin-top: 500px;
        }
        input{
            width: 450px;
            line-height: 25px;
        }
    </style>
</head>
<body>

<div class="layui-form-item">
    <label class="layui-form-label">详细地址</label>
    <div class="layui-input-block">
        <input type="text" id="particular_site" name="particular_site" value="" readonly autocomplete="off" placeholder="点击地图自动选定"
               class="layui-input">
    </div>
</div>
<div class="layui-form-item">
    <label class="layui-form-label">经纬度</label>
    <div class="layui-input-block">
        <input type="text" name="longitude" id="longitude" value="" readonly autocomplete="off" placeholder="点击地图自动选定"
               class="layui-input">
    </div>
</div>
<input type="hidden" name="lng" id="lng" value="">
<input type="hidden" name="lat" id="lat" value="">
<div class="layui-form-item">
    <label class="layui-form-label">搜索地址</label>
    <div class="layui-input-block">
        <input type="text" id="addressBox" autocomplete="off" placeholder="可搜索地址" class="layui-input">
        <button type="button" onclick="geocoder();" class="layui-btn layui-btn-primary layui-btn-position">搜索</button>
    </div>
</div>

<div id="iMap"></div>

</body>
</html>
<script language="javascript">
    var addressBox = document.getElementById('addressBox');
    var longitude = document.getElementById('longitude').value;
    var lng = document.getElementById('lng').value;
    var lat = document.getElementById('lat').value;
    var mapObj;
    var lnglatXY;
    //初始化地图
    function mapInit(x, y) {
        mapObj = new AMap.Map("iMap", {
            zoom: 16,
            center: new AMap.LngLat(x, y)
        });
        AMap.event.addListener(mapObj, 'click', getLnglat); //点击事件
        punctuation(x, y);
    }

    //标点展示
    function punctuation(x, y) {
        var marker = new AMap.Marker({
            map: mapObj,
            position: [x, y]
        });
    }

    if (longitude != "") {
        mapInit(lng, lat);
    } else {
        mapInit(116.397477,39.908692);
    }

    function geocoder() {
        mapObj.clearMap();
        var myGeo = new AMap.Geocoder();
        //地理编码,返回地理编码结果
        myGeo.getLocation(addressBox.value, function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
                //地址解析成功
                // var address = data.regeocode.formattedAddress;
                var x = result.geocodes[0].location.lng;
                var y = result.geocodes[0].location.lat;
                // document.getElementById("particular_site").value = address;
                document.getElementById("longitude").value = x + "," + y; //经纬度
                document.getElementById("lng").value = x; //经度
                document.getElementById("lat").value = y; //纬度
                var XY = [x, y];
                mapInit(x, y);
                regeocoder(XY);
                punctuation(x, y); //更新标记
            } else {
                //地址解析失败
                alert("地址不存在")
            }
        });
    }

    //鼠标点击，获取经纬度坐标
    function getLnglat(e) {
        mapObj.clearMap();
        console.log(e);
        var x = e.lnglat.getLng();
        var y = e.lnglat.getLat();
        document.getElementById("longitude").value = x + "," + y; //经纬度
        document.getElementById("lng").value = x; //经度
        document.getElementById("lat").value = y; //纬度
        var XY = [x, y];
        regeocoder(XY);
        punctuation(x, y); //更新标记
        lnglatXY = new AMap.LngLat(x, y);
    }

    //地址详细描述
    function regeocoder(loc) { //逆地理编码
        console.log(loc);
        var geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: "all"
        });
        geocoder.getAddress(loc, function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
                geocoder_CallBack(result);
            }
        });
    }

    function geocoder_CallBack(data) {
        console.log(data);
        var address = data.regeocode.formattedAddress; //返回地址描述
        document.getElementById("particular_site").value = address;
    }
</script>
<!-- js结束 -->