<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%;
}
#mapDiv {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!--显示地区的div-->
<div id="mapDiv">
</div>
<script src="http://api.map.baidu.com/api?v=2.0&ak=Q6aiD950lCsEWDWblF8T5BzQjxeUylCj"></script>
<script>
window.onload = function() {
//经纬度
var longitude = 121.51155629576095;
var latitude = 38.86043635958201;
//调用百度地图的API
var map = new BMap.Map(‘mapDiv‘); //创建地图对象
var point = new BMap.Point(longitude,latitude);//坐标点对象
map.centerAndZoom(point,15) ;//设置坐标中心点和缩放级别
var marker = new BMap.Marker(point); //创建标记点
map.addOverlay(marker);//在地图上添加标记点
var label = new BMap.Label(‘纠正之前的GPS坐标‘,{offset:new BMap.Size(20,-20)}); //创建文字标签
marker.setLabel(label); //添加标记的文字标签
//添加地图类型控件，默认在地图右上方
map.addControl(new BMap.MapTypeControl());
//地图平移缩放控件，PC端默认地图左上方，移动端提供缩放控件，默认在地图右下方
map.addControl(new BMap.NavigationControl());
//比例尺控件，默认在地图左下方，显示地图的比例关系
map.addControl(new BMap.ScaleControl());
//缩略地图控件，默认在地图右下方，是一个可折叠的缩略地图
map.addControl(new BMap.OverviewMapControl());
//定位控件，针对于移动端，默认在地图左下方
map.addControl(new BMap.GeolocationControl());
//开启滚轮缩放
map.enableScrollWheelZoom(true);
//转换gps坐标为百度坐标,延迟3000毫米不是必须，只是模拟网络网络延迟
setTimeout(function() {
var convertor = new BMap.Convertor(); //转换坐标类的对象
var pointArr = []; //坐标数组
pointArr.push(point); //加入一个坐标对象（可以加入多个坐标对象）
convertor.translate(pointArr,1,5,translateCallback);//转换坐标
},3000);
//转换完毕的回调函数，data就是转换后的数据
function translateCallback(data) {
if (data.status == 0) { //0为转换成功
var marker = new BMap.Marker(data.points[0]); //创建标记点
map.addOverlay(marker);//在地图上添加标记点
var label = new BMap.Label(‘纠正之后的GPS坐标‘,{offset:new BMap.Size(20,-20)}); //创建文字标签
marker.setLabel(label); //添加标记的文字标签
map.setCenter(data.points[0]);//调整地图中心点
}
}
}
</script>
</body>
</html>
时间： 2024-11-05 20:41:59