设置 var scrip 1.5 script [0 一个 blog
- <!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>
h5-23 - 百度地图 api
来源: http://www.bubuko.com/infodetail-2241705.html