自己写有难度吧!!!
网站建设哪家好,找成都创新互联公司!专注于网页设计、网站建设、微信开发、成都微信小程序、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了清远免费建站欢迎大家使用!
查看百度地图api里头有说明获取实时经纬度的。
1、成为开发者,获取百度地区秘钥
2、引入百度地图js插件
3、获取经纬度
script type="text/javascript"
// 初始化地图
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,12);
map.addEventListener("click", function(e){ //鼠标点击事件
var pt = e.point;
alert(pt.lng + "xxx" + pt.lat)//弹窗经纬度
});/script
script
navigator.geolocation.getCurrentPosition( // 该函数有如下三个参数
function(pos){ // 如果成果则执行该回调函数
alert(
' 经度:' + pos.coords.latitude +
' 纬度:' + pos.coords.longitude +
' 高度:' + pos.coords.altitude +
' 精确度(经纬):' + pos.coords.accuracy +
' 精确度(高度):' + pos.coords.altitudeAccuracy +
' 速度:' + pos.coords.speed
);
}, function(err){ // 如果失败则执行该回调函数
alert(err.message);
}, { // 附带参数
enableHighAccuracy: false, // 提高精度(耗费资源)
timeout: 3000, // 超过timeout则调用失败的回调函数
maximumAge: 1000 // 获取到的地理信息的有效期,超过有效期则重新获取一次位置信息
}
);
/script
参考 Lecaf 同学的博文
需要支持HTML5的浏览器才能支持
哪怕支持HTML5的浏览器支持也不一定很好
html xmlns=""
head
title根据地址查询经纬度/title
meta http-equiv="Content-Type" content="text/html; charset=utf-8"
script type="text/javascript" src=""/script
/head
body style="background:#CBE1FF"
div style="width:730px;margin:auto;"
要查询的地址:input id="text_" type="text" value="宁波天一广场" style="margin-right:100px;"/
查询结果(经纬度):input id="result_" type="text" /
input type="button" value="查询" onclick="searchByStationName();"/
div id="container"
style="position: absolute;
margin-top:30px;
width: 730px;
height: 590px;
top: 50;
border: 1px solid gray;
overflow:hidden;"
/div
/div
/body
script type="text/javascript"
var map = new BMap.Map("container");
map.centerAndZoom("宁波", 12);
map.enableScrollWheelZoom(); //启用滚轮放大缩小,默认禁用
map.enableContinuousZoom(); //启用地图惯性拖拽,默认禁用
map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT })); //右下角,打开
var localSearch = new BMap.LocalSearch(map);
localSearch.enableAutoViewport(); //允许自动调节窗体大小
function searchByStationName() {
map.clearOverlays();//清空原来的标注
var keyword = document.getElementById("text_").value;
localSearch.setSearchCompleteCallback(function (searchResult) {
var poi = searchResult.getPoi(0);
document.getElementById("result_").value = poi.point.lng + "," + poi.point.lat;
map.centerAndZoom(poi.point, 13);
var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat)); // 创建标注,为要查询的地方对应的经纬度
map.addOverlay(marker);
var content = document.getElementById("text_").value + "br/br/经度:" + poi.point.lng + "br/纬度:" + poi.point.lat;
var infoWindow = new BMap.InfoWindow("p style='font-size:14px;'" + content + "/p");
marker.addEventListener("click", function () { this.openInfoWindow(infoWindow); });
// marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
});
localSearch.search(keyword);
}
/script
/html