百度地图拾取坐标，可查询，可点选

kn
2018-11-22 23:04:27
常用代码片段
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body>

<div style="width:730px;margin:auto;">   
    地址：<input id="text" type="text" value="北京大学" style="margin-right:10px;width: 300px"/><input type="button" value="查询" onclick="searchByStationName();" style="margin-right:10px;"/>
    经纬度：<input id="lat" type="text" style="margin-right:10px;width: 80px" /><input id="lng" type="text" style="margin-right:10px;width: 80px"/><input type="button" value="确定" id="tobeokaddress"/>
    
</div>
<div id="allmap" style="height:500px;width:990px;margin-top:10px"></div>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=RweV3BdkZ2M8LYFn5Av35ReGKGWjNcVj"></script>

<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    map.enableScrollWheelZoom(true);
    var geoc = new BMap.Geocoder();    

    var localSearch = new BMap.LocalSearch(map);
    localSearch.enableAutoViewport(); //允许自动调节窗体大小

    map.addEventListener("click", function(e){   

        map.clearOverlays();//清空原来的标注
        //通过点击百度地图，可以获取到对应的point, 由point的lng、lat属性就可以获取对应的经度纬度     
        var pt = e.point;
        geoc.getLocation(pt, function(rs){
            //addressComponents对象可以获取到详细的地址信息
            var addComp = rs.addressComponents;
            var site = addComp.province + " " + addComp.city + " " + addComp.district + " " + addComp.street + " " + addComp.streetNumber;
            //将对应的HTML元素设置值
            // parent.document.getElementById("lat").value = pt.lat;
            // parent.document.getElementById("lng").value = pt.lng;
            var marker = new BMap.Marker(new BMap.Point(pt.lng, pt.lat));  // 创建标注，为要查询的地方对应的经纬度
            map.addOverlay(marker);
            document.getElementById("lat").value =pt.lat;
            document.getElementById("lng").value = pt.lng;
            document.getElementById("text").value = site;
        });        
    });
    function searchByStationName() {
        map.clearOverlays();//清空原来的标注
        var keyword = document.getElementById("text").value;
        localSearch.setSearchCompleteCallback(function (searchResult) {
            var poi = searchResult.getPoi(0);
            document.getElementById("lat").value =poi.point.lat;
            document.getElementById("lng").value = poi.point.lng;
            map.centerAndZoom(poi.point, 13);
            var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat));  // 创建标注，为要查询的地方对应的经纬度
            map.addOverlay(marker);
        });
        localSearch.search(keyword);
    }
    searchByStationName();
    jQuery(document).ready(function($) {
        $("#tobeokaddress").click(function(e) {
            var other = parent.layer.getFrameIndex(window.name);
            setTimeout(function(){parent.layer.close(other)},100);
            parent.document.getElementById("address").value = $("#text").val();
            parent.document.getElementById("lat").value = $("#lat").val();
            parent.document.getElementById("lng").value = $("#lng").val();
        });
    });
</script>
</body>
</html>
本文为看恩吧原创文章,转载无需和我联系,但请注明来自knsay.com
打赏