在浏览器中使用百度地图的定位服务获得经纬度

最新推荐文章于 2024-07-02 17:50:43 发布

空间曲率驱动

最新推荐文章于 2024-07-02 17:50:43 发布

阅读量5.8k

点赞数 1

分类专栏：百度地图文章标签：定位经纬度百度地图API

本文链接：https://blog.csdn.net/cw_hello1/article/details/78296474

版权

百度地图专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.在使用百度地图之前，先登录百度账号，申请一个ak秘钥。申请ak访问码的地址为：http://lbsyun.baidu.com/apiconsole/key

申请一个ak用于访问百度地图API的访问码。

2.在html中加入一个脚本<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你申请的ak"></script>

这里是我申请的一个ak（mzGfyhryZXRDC81ITnI6Pr20flEL1D1M）。

3.定义一个用于放置百度地图的div控件。例如：

            <div style="height: 400px;width:730px;margin:auto;">
                <div id="container"
                     style="
                width: 730px;
                height: 400px;
                left: 150px;
                border: 1px solid gray;
                overflow:hidden;">
                </div>
            </div>

4.然后在js中引用百度地图API。

<script>
//map中的container必须与div中id保持一致
var map = new BMap.Map("container");
    map.centerAndZoom("昆明",12);
    //逆地址解析（将经纬度转化为地址）
    var geoc = new BMap.Geocoder();
    map.enableScrollWheelZoom();    //启用滚轮放大缩小，默认禁用
    map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
    //添加单击事件
    map.addEventListener("click",function(e){
        map.clearOverlays();//清空原来的标注
        document.getElementById("longitude").value = e.point.lng;
        document.getElementById("latitude").value = e.point.lat;
        var marker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat));  // 创建标注，为要查询的地方对应的经纬度
        map.addOverlay(marker);
        geoc.getLocation(e.point,function(rs){
            var addComp = rs.addressComponents;
            document.getElementById("address").value=(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
        });
    });
</script>

5.下面是定位之后显示的位置信息，经纬度。

6.下面的地址在CSDN上上传的资源地址，也只可以下载下来，直接打开，使用定位服务。

http://download.csdn.net/download/cw_hello1/10032332

7.下面附上完整源代码。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=mzGfyhryZXRDC81ITnI6Pr20flEL1D1M"></script>
</head>
<body>
<div>
            <div>
                <div>位置</div>
                <div>
                    <input id="address" type="text"/>
                </div>
            </div>
            <div style="height: 400px;width:730px;margin:auto;">
                <div id="container"
                     style="
                width: 730px;
                height: 400px;
                border: 1px solid gray;
                overflow:hidden;">
                </div>
            </div>
            <div>
                <div>经度</div>
                <div>
                    <input id="longitude" type="text" placeholder="经度"/>
                </div>
            </div>
            <div>
                <div>纬度</div>
                <div>
                    <input id="latitude" type="text" placeholder="纬度"/>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
//map中的container必须与div中id保持一致
var map = new BMap.Map("container");
    map.centerAndZoom("昆明",12);
    //逆地址解析（将经纬度转化为地址）
    var geoc = new BMap.Geocoder();
    map.enableScrollWheelZoom();    //启用滚轮放大缩小，默认禁用
    map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
    //添加单击事件
    map.addEventListener("click",function(e){
        map.clearOverlays();//清空原来的标注
        document.getElementById("longitude").value = e.point.lng;
        document.getElementById("latitude").value = e.point.lat;
        var marker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat));  // 创建标注，为要查询的地方对应的经纬度
        map.addOverlay(marker);
        geoc.getLocation(e.point,function(rs){
            var addComp = rs.addressComponents;
            document.getElementById("address").value=(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
        });
    });
</script>
</body>
</html>

8.在百度地图上有许多的API可以使用。

具体的地址是：http://lbsyun.baidu.com/jsdemo.htm?a#a1_2

空间曲率驱动

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
在浏览器中使用百度地图的定位服务获得经纬度

1.在使用百度地图之前，先登录百度账号，申请一个ak秘钥。申请ak访问码的地址为：http://lbsyun.baidu.com/apiconsole/key申请一个ak用于访问百度地图API的访问码。2.在html中加入一个脚本这里是我申请的一个ak（mzGfyhryZXRDC81ITnI6Pr20flEL1D1M）。3.定义一个用于放置百度地图的div控件。例如：
复制链接

扫一扫

专栏目录