百度地图api 实现地址选择框

利用百度API实现地图标注与搜索功能

最新推荐文章于 2025-10-14 09:08:58 发布

原创最新推荐文章于 2025-10-14 09:08:58 发布 · 5.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#百度地图 #javascript

javascript 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何使用百度地图API实现地图上的地址选择弹窗、标注展示、移动标注、根据坐标显示地址、搜索地址等功能。通过提供代码示例，展示了如何通过JavaScript实现这些功能，并强调了获取API密钥的重要性。

百度api 现在功能越来越强大了。具体参见网址：

百度地图api

需求：根据地址或者经纬度带出标注（marker），移动标注，或者输入地址确认精度度。

实现：

1、javascript 大众版来实现地址选择弹窗（http://developer.baidu.com/map/index.php?title=jspopular ）

2、必须申请一个百度地图ak,就是你秘钥

3、调用相关api

具体先看效果

实现的主要功能：

1、根据坐标（经度，维度）展示标注marker （new Point(lon,lat)）

2、移动marker,自动带出地址 (endDrag 事件)

3、根据地址计算坐标（BMap.Geocoder.getPoint()）

4、搜索能带出地址列表

具体见代码

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>地址选择</title>
    <style type="text/css">
        body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";font-size:14px;}
        #l-map{height:500px;width:100%;}
        #r-result{width:100%;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=8ngEyv6E25vXu8qrF7icqReh">
        //v1.5版本的引用方式：src="http://api.map.baidu.com/api?v=1.5&ak=您的密钥"
        //v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"
    </script>
</head>

<body>
<div id="r-result"><input type="text" id="suggestId" size="20"  style="width:500px;height:30px" placeholder="请输入地址"/>
    <input type="button" onclick="addrSearch()" class="btn btn-danger" value="搜索" style="width: 150px;height: 35px">
</div>
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
<div id="l-map"></div>
<script type="text/javascript">
    var marker;
    var zoomSize = 18;
    var map = new BMap.Map("l-map");
    var lon = 116.404;  //默认为北京市
    var lat= 39.915;

    //业务处理，获取业务中的经纬度，有则处理，没有则用默认北京
    if(typeof getBizPoint == "function"){
        var pointJson = getBizPoint();
        lon = pointJson.lon;
        lat = pointJson.lat;
    }

    //确定中心位置
    var point = new BMap.Point(lon, lat);
    map.centerAndZoom(point, zoomSize);


    //标注
    marker = new BMap.Marker(point);// 创建标注
    map.addOverlay(marker);             // 将标注添加到地图中
    marker.enableDragging();           // 可拖拽
    marker.addEventListener("dragend", setBizValue);

    // 添加带有定位的导航控件
    var navigationControl = new BMap.NavigationControl({
        // 靠左上角位置
        anchor: BMAP_ANCHOR_TOP_LEFT,
        // LARGE类型
        type: BMAP_NAVIGATION_CONTROL_LARGE,
        // 启用显示定位
        enableGeolocation: true
    });
    map.addControl(navigationControl);

    var geoc = new BMap.Geocoder();


    //输入地址事件处理 start
    var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
            {"input" : "suggestId"
                ,"location" : map
            });

    ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
        var str = "";
        var _value = e.fromitem.value;
        var value = "";
        if (e.fromitem.index > -1) {
            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        }
        str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

        value = "";
        if (e.toitem.index > -1) {
            _value = e.toitem.value;
            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        }
        str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
        G("searchResultPanel").innerHTML = str;
    });

    var myValue;
    ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
        var _value = e.item.value;
        myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
        setPlace();
    });

    function setPlace(){
        map.clearOverlays();    //清除地图上所有覆盖物
        function myFun(){
            var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
            setBizValueForPoint(pp);
            map.centerAndZoom(pp, zoomSize);
            marker = new BMap.Marker(pp);
            marker.enableDragging();           // 可拖拽
            map.addOverlay(marker);    //添加标注
            marker.addEventListener("dragend", setBizValue);
        }
        var local = new BMap.LocalSearch(map, { //智能搜索
            onSearchComplete: myFun
        });
        local.search(myValue);
    }

    function G(id) {
        return document.getElementById(id);
    }
    //输入地址事件处理 end


    //地址转坐标
    function addrSearch(serachAddr){
       // 创建地址解析器实例
        var myGeo = new BMap.Geocoder();
        // 将地址解析结果显示在地图上,并调整地图视野
        if(!serachAddr){
            serachAddr = $("#suggestId").val();
        }
        myGeo.getPoint(serachAddr, function(point){
            if (point) {
                setBizValueForPoint(point);
                map.clearOverlays();
                map.centerAndZoom(point, zoomSize);
                marker = new BMap.Marker(point);
                marker.enableDragging();           // 可拖拽
                map.addOverlay(marker);    //添加标注
                marker.addEventListener("dragend", setBizValue);

            }else{
                console.log("search click no results!")
            }
        });

    }

    //业务方法 start
    //根据事件，设置经纬度和地址
    function setBizValue(e){
        var point = e.point;
        setBizValueForPoint(point);
    }

    //根据Point，设置经纬度和地址
    function setBizValueForPoint(point){
        lon = point.lng;
        lat = point.lat;
        geoc.getLocation(point, function(rs){
            var addComp = rs.addressComponents;
            addr = addComp.province + addComp.city + addComp.district  + addComp.street + addComp.streetNumber;
            if(typeof setBizFun == "function"){
                setBizFun({lon:lon,lat:lat,addr:addr});
            }
        });

    }

    //根据marker，设置经纬度和地址
    function setBizValueForMarker(){
        var point = marker.getPosition();
        setBizValueForPoint(point);
    }

    //end

</script>
</body>
</html>