h5-23-百度地图api
Posted 奋斗的少年WH
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了h5-23-百度地图api相关的知识，希望对你有一定的参考价值。
<!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的主要内容，如果未能解决你的问题，请参考以下文章