具体的百度地图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>
时间： 2024-12-14 18:13:50