具体的百度地图API的使用方法查看百度地图API里的DEMO
<style> #div1{ width:400px; height:400px; border:1px #000 solid;} </style> <script src="http://api.map.baidu.com/api?v=1.3"></script> <script> window.onload = function(){ var oInput = document.getElementById('input1'); oInput.onclick = function(){ navigator.geolocation.getCurrentPosition(function(position){ //获取经度和纬度 var y = position.coords.longitude; var x = position.coords.latitude; var map = new BMap.Map("div1");//创建地图对象 var pt = new BMap.Point(y, x);//将经度和纬度传进来 map.centerAndZoom(pt, 14); //地图缩放层级 map.enableScrollWheelZoom(); //鼠标滚轮放大缩小 var myIcon = new BMap.Icon("miaov.png", new BMap.Size(30,30)); var marker2 = new BMap.Marker(pt,{icon:myIcon}); // 创建标注 map.addOverlay(marker2); var opts = { width : 200, // 信息窗口宽度 height: 60, // 信息窗口高度 title : "妙味课堂" // 信息窗口标题 } var infoWindow = new BMap.InfoWindow("IT培训机构", opts); // 创建信息窗口对象 map.openInfoWindow(infoWindow,pt); //开启信息窗口 }); }; }; </script> </head> <body> <input type="button" value="请求" id="input1" /> <div id="div1"></div> </body>