百度Map API初试

最新推荐文章于 2024-09-25 22:15:48 发布

安菲尔德的门柱

最新推荐文章于 2024-09-25 22:15:48 发布

阅读量763

点赞数

分类专栏： js/jQuery学习文章标签：百度map api javascript

本文链接：https://blog.csdn.net/gerrard0616/article/details/11395007

版权

js/jQuery学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

最近在开始看百度Map javascript版的API,看了一些文档，就小试了下，实现最简单的根据名字搜索，显示位置。

下面是js代码

<html>
    <head>
        <title>baidu_map_test</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.4"></script>
        <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
        <style type="text/css">
            #mapBox{width: 720px;height: 500px;overflow: hidden;margin-left:20px;margin-top:20px;border:solid 2px #ccc;}
            .nav{margin-left:20px;margin-top:20px;}
        </style>
        <script type="text/javascript">
            /*****************************************************************
            *
            *初始化地图
            *
            *****************************************************************/
            function createMap() {
                var map = new BMap.Map("mapBox");
                if (arguments.length == 1) {
                    map.centerAndZoom(arguments[0]);
                }
                else if (arguments.length == 2) {
                    var point = new BMap.Point(arguments[0], arguments[1]);
                    map.centerAndZoom(point, 10);
                }  
                window.map = map;
            }


            /*****************************************************************
            *
            *增加地图事件
            *
            *****************************************************************/
            function addMapEvent() {
                map.enableScrollWheelZoom();
            }

            /*****************************************************************
            *
            *增加控件
            *
            *****************************************************************/
            function addMapControl() {
                map.addControl(new BMap.NavigationControl());
                map.addControl(new BMap.OverviewMapControl({ isOpen: true}));
                map.addControl(new BMap.MapTypeControl({ offset: new BMap.Size(40, 10) }));
                map.addControl(new BMap.ScaleControl({ offset: new BMap.Size(5, 35) }));
            }

            function initMap() {
                createMap("南京市");
                addMapEvent();
                addMapControl();
            }

            $(function () {

                initMap();


                /*******************************************************************
                *
                *增加button的click事件完成搜索
                *
                ********************************************************************/
                $("#btn").click(function () {
                    var city = $("#city").val();
                    var ls = new BMap.LocalSearch(map,{renderOptions:{map: map}});
                    ls.search(city);
                });
            })
</script>
    </head>
    <body>
        <span class="nav">输入地点:</span><input id="city"  type="text" value="" maxlength="20" />
        <input id="btn" type="button" value="查找"/><br /><br />
        <div id="mapBox"></div>
    </body> 
</html>

示例图