一个简单的百度地图工具只要地址不需要经纬度坐标

最新推荐文章于 2022-03-25 13:47:28 发布

djk8888

最新推荐文章于 2022-03-25 13:47:28 发布

阅读量511

点赞数

分类专栏： html JS代码文章标签：百度地图

本文链接：https://blog.csdn.net/djk8888/article/details/103144227

版权

html 同时被 2 个专栏收录

97 篇文章 1 订阅

订阅专栏

JS代码

76 篇文章 1 订阅

订阅专栏

一个html页面：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>根据地址查询经纬度</title>    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var add = decodeURI(getQueryVariable('add'));//需查询的地址
            if (add != "") {
                searchByStationName(add);
            }
            else {
                searchByStationName("北京市");//给个默认值
            }
        });
    </script>
    <script type="text/javascript">
        function getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) { return pair[1]; }
            }
            return (false);
        }
    </script>
</head>
<body>
    <div id="container" style="width: 480px;height: 300px; overflow:hidden;"></div>
</body>
</html>
<script type="text/javascript">
    var map = new BMap.Map("container");
    var localSearch = new BMap.LocalSearch(map);   
    
    function searchByStationName(add) {
        map.clearOverlays();//清空原来的标注
        map.enableScrollWheelZoom();//启用滚轮放大缩小，默认禁用
        map.centerAndZoom("北京市", 18);//18代表地图视野大小，值为：0~19，推荐：17或18
        //map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
        localSearch.enableAutoViewport(); //允许自动调节窗体大小

        var keyword = add;//根据地址查询
        localSearch.setSearchCompleteCallback(function (searchResult) {
            var poi = searchResult.getPoi(0);
            map.centerAndZoom(poi.point, 18);
            //添加小红点标记
            var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat)); 
            map.addOverlay(marker);
            //添加地址框
            var infoWindow = new BMap.InfoWindow('<p style="color: #865BA3;font-size:14px;">地址：' + add + '</p>');
            marker.addEventListener("click", function () {
                this.openInfoWindow(infoWindow);
            });
            marker.openInfoWindow(infoWindow);
        });
        localSearch.search(keyword);
    }

</script>

利用iframe调用此页面，需要参数add=你要的地址：

<iframe src="http://djk8888.byethost32.com/BaiduMap.html?add=北京天安门" width="480" height="300" 
frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes"></iframe>

效果图：