使用百度地图完成地址选择界面

最新推荐文章于 2024-09-25 09:00:00 发布

原创最新推荐文章于 2024-09-25 09:00:00 发布 · 2.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#界面

PHP 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用百度地图API实现地址检索功能，通过HTML和JS代码动态展示地图及周边地点信息，适用于需要地理位置服务的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

地址选择界面

使用百度地图完成地址选择界面

HTML代码：

    <div class="mui-content">
        <div class="mui-input-row mui-search">
            <input id="suggestId" type="search" class="mui-input-clear" placeholder="地址检索">
        </div>
        <!--百度地图显示框-->
        <div id="l-map"></div>
        <!--地址列表-->
        <div id="r-result"></div>
        <!--地图中心的图钉-->
        <div id="map_pin">
            <a><span class="mui-icon mui-icon-plusempty"></span></a>
        </div>
    </div>

JS代码：
引入百度地图API
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=8d867483baeaffd7f85b1ee099aee919"></script>

 var map = new BMap.Map("l-map");            // 创建Map实例
 map.centerAndZoom(basePoint,14);//设置中心位置
 map.addEventListener("moveend",showCurrentPoi);//设置地图移动监听

每次移动地图位置，自动获取当前地图中心点的坐标，并显示附近的地址：

function showCurrentPoi()
    {
        var center = map.getCenter();
        var mOption = {
            poiRadius : 500,           //半径为1000米内的POI,默认100米
            numPois : 12                //列举出50个POI,默认10个
        }
        var myGeo = new BMap.Geocoder();
        myGeo.getLocation(center, function mCallback(rs){
                var allPois = rs.surroundingPois;       //获取全部POI（该点半径为100米内有6个POI点）
                var content = "";
                content = " <ul class='mui-table-view mui-table-view-radio'> ";
                for(i=0;i<allPois.length;++i){
                    title[i] = allPois[i].title;
                    address[i] = allPois[i].address;
                    city[i] = allPois[i].city;
                    points[i] = allPois[i].point;
                    content = content +
                    "<li class='mui-table-view-cell'>"+
                    "<a class='mui-navigate-right'>"+
                    "<div id='icon-location' class='mui-media-object mui-pull-left'><span class='mui-icon mui-icon-location-filled'></span></div>"+
                    "<div class='mui-media-body'><span class='points_title'>" + title[i] + "</span><p class='mui-ellipsis points_address'>" + address[i] + "</p>"+
                    "<p class='points_other_details display_none' city_name="+city[i]+" lng="+points[i].lng+" lat="+points[i].lat+"></p>"+
                    "</div></a></li>";

                }
                content = content + " </ul>";
                document.getElementById("r-result").innerHTML = content;
            },mOption);
    }