php百度地图获取当前位置信息,利用百度地图API获取当前位置信息的实例

利用百度地图API可以做很多事情,个人感觉最核心也是最基础的就是定位功能了。这里分享一个制作的JS可以实现登录网页后定位:

var map;

var gpsPoint;

var baiduPoint;

var gpsAddress;

var baiduAddress;

var x;

var y;

function getLocation() {

//根据IP获取城市

var myCity = new BMap.LocalCity();

myCity.get(getCityByIP);

//获取GPS坐标

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(showMap, handleError, { enableHighAccuracy: true, maximumAge: 1000 });

} else {

alert("您的浏览器不支持使用HTML 5来获取地理位置服务");

}

}

function showMap(value) {

var longitude = value.coords.longitude;

var latitude = value.coords.latitude;

map = new BMap.Map("map");

x=latitude;

y=longitude;

//alert("坐标经度为:" + latitude + ", 纬度为:" + longitude );

gpsPoint = new BMap.Point(longitude, latitude); // 创建点坐标

//根据坐标逆解析地址

var geoc = new BMap.Geocoder();

geoc.getLocation(gpsPoint, getCityByCoordinate);

BMap.Convertor.translate(gpsPoint, 0, translateCallback);

map.enableScrollWheelZoom(true);

}

translateCallback = function (point) {

baiduPoint = point;

map.centerAndZoom(baiduPoint, 18);

var geoc = new BMap.Geocoder();

geoc.getLocation(baiduPoint, getCityByBaiduCoordinate);

}

function getCityByCoordinate(rs) {

gpsAddress = rs.addressComponents;

var address = "GPS标注:" + gpsAddress.province + "," + gpsAddress.city + "," + gpsAddress.district + "," + gpsAddress.street + "," + gpsAddress.streetNumber;

var marker = new BMap.Marker(gpsPoint); // 创建标注

map.addOverlay(marker); // 将标注添加到地图中

var labelgps = new BMap.Label(address, { offset: new BMap.Size(20, -10) });

marker.setLabel(labelgps); //添加GPS标注

}

function getCityByBaiduCoordinate(rs) {

baiduAddress = rs.addressComponents;

var address = "百度标注:" + baiduAddress.province + "," + baiduAddress.city + "," + baiduAddress.district + "," + baiduAddress.street + "," + baiduAddress.streetNumber;

var marker = new BMap.Marker(baiduPoint); // 创建标注

map.addOverlay(marker); // 将标注添加到地图中

var labelbaidu = new BMap.Label(address, { offset: new BMap.Size(20, -10) });

marker.setLabel(labelbaidu); //添加百度标注

}

//根据IP获取城市

function getCityByIP(rs) {

var cityName = rs.name;

alert("根据IP定位您所在的城市为:" + cityName);

}

function handleError(value) {

switch (value.code) {

case 1:

alert("位置服务被拒绝");

break;

case 2:

alert("暂时获取不到位置信息");

break;

case 3:

alert("获取信息超时");

break;

case 4:

alert("未知错误");

break;

}

}

function init() {

getLocation();

}

window.onload = init;

完成定位功能后可以添加相关代码编辑地图控件 覆盖物 信息窗口等等各种功能。

以上这篇利用百度地图API获取当前位置信息的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现百度地图定位当前位置的步骤如下: 1. 在前端代码中引入百度地图 JavaScript API,并创建地图对象。 ```html <!-- 引入百度地图 JavaScript API --> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的AK"></script> <!-- 创建地图容器 --> <div id="map"></div> <!-- 在 JavaScript 中创建地图对象 --> <script type="text/javascript"> // 创建地图对象 var map = new BMap.Map("map"); </script> ``` 2. 调用浏览器的定位 API 获取当前位置的经纬度。 ```javascript navigator.geolocation.getCurrentPosition(function(position) { // 获取当前位置的经纬度 var longitude = position.coords.longitude; var latitude = position.coords.latitude; }); ``` 3. 将获取到的经纬度转换为百度地图坐标系,并在地图上添加标注点。 ```javascript // 将经纬度转换为百度地图坐标系 var point = new BMap.Point(longitude, latitude); // 在地图上添加标注点 var marker = new BMap.Marker(point); map.addOverlay(marker); // 将地图中心点设置为当前位置 map.centerAndZoom(point, 15); ``` 完整代码示例: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>百度地图定位当前位置</title> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的AK"></script> </head> <body> <div id="map" style="width:100%;height:500px;"></div> <script type="text/javascript"> // 创建地图对象 var map = new BMap.Map("map"); // 获取当前位置的经纬度 navigator.geolocation.getCurrentPosition(function(position) { var longitude = position.coords.longitude; var latitude = position.coords.latitude; // 将经纬度转换为百度地图坐标系 var point = new BMap.Point(longitude, latitude); // 在地图上添加标注点 var marker = new BMap.Marker(point); map.addOverlay(marker); // 将地图中心点设置为当前位置 map.centerAndZoom(point, 15); }); </script> </body> </html> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值