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

一个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>

效果图:

在线体验地址:http://djk8888.byethost32.com/BaiduMap.html?add=北京天安门

(可以试着改掉add参数值,看看别的地址)

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值