获取百度地图定位功能的API

朱雀 2023-06-08 06:45 280阅读 0赞

转载自：[http://www.cnhonkerarmy.com/forum.php?mod=viewthread&tid=237777][http_www.cnhonkerarmy.com_forum.php_mod_viewthread_tid_237777]

简单向：
    
    <html>
    <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
            <style type="text/css">
                    body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
            </style>
            <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=qg0ZwtW8fS3qLCMqz3cYufcdTbDhCcAs"></script>
            <title>IP定位获取当前城市</title>
    </head>
    <body>
            <div id="allmap"></div>
    </body>
    </html>
    
    <script type="text/javascript">
            // 百度地图API功能
            var map = new BMap.Map("allmap");
            var point = new BMap.Point(116.331398,39.897445);
            map.centerAndZoom(point,12);
            function myFun(result){
                    var cityName = result.name;
                    map.setCenter(cityName);
                    alert("当前定位城市:"+cityName);
            }
            var myCity = new BMap.LocalCity();
            myCity.get(myFun);
    </script>
    
    
    
    生成h5页面是这样的
    
    
    
    
    这是一个最简单的需求 那么我们怎么写出来呢
    
    一步步解析
    添加一个meta标签使其更容易在移动端显示
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    
    style里面的内容是 设置容器样式大小，使地图充满整个浏览器窗口：
    <style type="text/css">
                    body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
            </style>
           
    引用百度地图api文件
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=qg0ZwtW8fS3qLCMqz3cYufcdTbDhCcAs"></script>
    
    地图需要一个HTML元素作为容器，这样才能展现到页面上。给他一个id属性接下来我们写js的时候就可以对其绑定
    <div id="allmap"></div>
    
    接下来就是js的内容了
    
    位于BMap命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象
    var map = new BMap.Map("allmap");
    
    设置中心点坐标
    这里我们使用BMap命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。（为天安门坐标）
    var point = new BMap.Point(116.331398,39.897445);
    
    
    地图初始化，同时设置地图展示级别
    在创建地图实例后，我们需要对其进行初始化，BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。 地图必须经过初始化才可以执行其他操作。
    
            map.centerAndZoom(point,12);
    
    定义函数myFun给他传递result参数，当调用这个函数时浏览器会给你弹窗   map.setCenter(cityName);这句的意思是设置地图的中心
    
    
    function myFun(result){
                    var cityName = result.name;
                    map.setCenter(cityName);
                    alert("当前定位城市:"+cityName);
            }
    
    
    LocalCity（）方法 ：根据用户IP 返回城市级别的定位结果
    var myCity = new BMap.LocalCity();
    
    
    调用myFun函数将myCity参数传入= =
    
    这样就完成了呢

[http_www.cnhonkerarmy.com_forum.php_mod_viewthread_tid_237777]: http://www.cnhonkerarmy.com/forum.php?mod=viewthread&tid=237777