利用百度地图API,在浏览器中找到自己的位置

2023-07-16 19:46:57

首先你得有个百度地图的秘钥,http://lbsyun.baidu.com/apiconsole/key

剩下的就是编码了

这里面会用到一个javascript里的一个函数，getMyLocation()，利用它我们就可以获得自己的经度纬度，然后再经过百度地图，将其显示出来。

上代码，首先是html文件中的代码，使用html5标准

<!DOCTYPE html>

<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=WkiwWUQooPfVD2lgLGV8sv3x"></script>

    <title>获取我的位置</title>

     <script type="text/javascript" src="text.js">

    </script>

</head>

<body>

    <div id="allmap"></div>

</body>

</html>

然后js中的代码

function map(position)

{

    // 百度地图API功能

    var map = new BMap.Map("allmap");    // 创建Map实例

    alert(position.coords.longitude);

    alert(position.coords.latitude);

    map.centerAndZoom(new BMap.Point(position.coords.longitude, position.coords.latitude), 15);  // 初始化地图,设置中心点坐标和地图级别  数字越大  放大倍数越大

    map.addControl(new BMap.MapTypeControl());   //添加地图类型控件

    map.setCurrentCity("我的位置");          // 设置地图显示的城市 此项是必须设置的

    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

}

window.onload=getMyLocation;        //没有了这句话  页面上讲不会显示出地图

function getMyLocation()

{

    if(navigator.geolocation)

    {

        navigator.geolocation.getCurrentPosition(map);

    }

    else

    {

        alert("很抱歉，获取您的地址信息失败");

    }

}

在程序运行时，浏览器会提示是否运行获取你的地址信息，这里选择运行。

需要注意的一点是window.onload=getMyLocation; //没有了这句话页面上讲不会显示出地图

这句话是指在完成了html的加载后再执行这个函数，且这里好像是要指向getMyLocation，而不能指向map函数，具体为什么我还不清楚，或者我还没学到那里，不过我的理解是，map函数的运行依赖于getMyLocation，而反之则不然，所以这里指向getMyLocation函数。

运行截图：

码农公寓

相关文章