js百度地图的运用（地址(逆)解析）

需求：输入（搜索框）地址在地图上找到对应的（地图）地址，点击（地图）地址显示对应（搜索框）地址，在（地图）地址范围100米内覆盖一个圆，在该圆内点击，（搜索框）地址不变，GPS变，在该圆外点击，则（搜索框）地址变，GPS变。

js百度地图的运用（地址(逆)解析）

解决方案：百度地图开放平台

代码：

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
	body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";font-size:14px;}
        #allmap{width:100%;height:500px;}.BMap_cpyCtrl.BMap_noprint.anchorBL{display: none;}.anchorBL{display: none;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的ak"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
    <title>逆地址解析</title>
</head>
<body>
	<div id="allmap"></div>
    <h5>点击地图展示详细地址</h5>
    <p id="address">详细地址</p>
    <p id="ip">ip地址</p>
    <p id="result">区域范围</p>
    <input type="text" id="input">
    <button id="button">查询地址</button>
</body>
</html>
<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap");
	var point = new BMap.Point(116.331398,39.897445);
	map.centerAndZoom(point,12);
	var geoc = new BMap.Geocoder();
    var tempCircle;
    // ip自动定位当前城市
	function myFun(result){
		var cityName = result.name;
		map.setCenter(cityName);
	}
	var myCity = new BMap.LocalCity();
	myCity.get(myFun);
    // 监听点击地图获取地址信息
	map.addEventListener("click", function(e){        
		var pt = e.point;
		geoc.getLocation(pt, function(rs){
			var addComp = rs.addressComponents;
            var point = rs.point;
            map.clearOverlays();
            map.addOverlay(new BMap.Marker(point));
            var circle = new BMap.Circle(point,100,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
            map.addOverlay(circle); //创建圆
            document.getElementById("ip").innerHTML=JSON.stringify(rs.point)
            if(InOrOutPolygon(point,tempCircle)){
                document.getElementById("input").value = rs.address
                document.getElementById("address").innerHTML=rs.address
            }
            tempCircle=circle;      
        });        
	});
    // 搜索按钮
    document.getElementById("button").onclick=function(){
        search()
    }
    // 监听搜索框回车事件
    document.getElementById("input").onkeydown=function(event) {
        if (event.keyCode == "13") {
            //回车执行查询
            search()
        }
    }
    // 地址查询
    function search(){
        var address=document.getElementById("input").value
        var myGeo = new BMap.Geocoder();
        // 将地址解析结果显示在地图上,并调整地图视野
        myGeo.getPoint(address, function(point){
            if (point) {
                map.clearOverlays();
                map.centerAndZoom(point, 12);
                map.addOverlay(new BMap.Marker(point));
                var _this=new BMap.Circle(point,100,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
                map.addOverlay(_this); //创建圆
            }else{
                alert("您选择地址没有解析到结果!");
            }
        }, "杭州市");
    }
    // 允许地址放大缩小
    map.enableScrollWheelZoom(true);

    // 判断是否在圆形内
    function InOrOutPolygon(pt, circle){
        console.log(pt)
        console.log(circle)
        // var pt = new BMap.Point(lng, lat);
        var result = BMapLib.GeoUtils.isPointInCircle(pt, circle);
        tempCircle=circle;
        console.log(result)
        if (result == true) {
            document.getElementById("result").innerHTML = "在区域范围内";
            return false;
        } else {
            document.getElementById("result").innerHTML = "在区域范围外";
            return true;
        }
    }
</script>

js百度地图的运用（地址(逆)解析）

相关推荐