<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#map{
width: 800px;
height: 600px;
margin: 100px auto 0;
border:1px solid #333;
}
h2{
font-size: 12px;
color:#333;
font-family: "微软雅黑";
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=6Px8GXntCjecLouTf6qkT6yhOyENeWYU"></script>
</head>
<body>
<div id="map"></div>
<script>
var map = new BMap.Map("map");//生成地图实例对象
var point = new BMap.Point(116.404, 39.915); //设置坐标点,可用坐标拾取系统来获取坐标
map.centerAndZoom(point, 16);//设置中心点坐标以及地图级别
map.enableScrollWheelZoom(true);//设置滚轮缩放
//平移缩放控件、一个比例尺控件和一个缩略图控件
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.addControl(new BMap.MapTypeControl())
//添加地图风格
var mapStyle={ style : "hardedge" }
map.setMapStyle(mapStyle);
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
var myIcon = new BMap.Icon("bick.png", new BMap.Size(23, 28),{
anchor:new BMap.Size(30,28)
});//自定义标注图标
var marker = new BMap.Marker(point, {icon: myIcon});
map.addOverlay(marker); // 创建标注对象并添加到地图
marker.enableDragging(); //设置拖拽
//监听拖拽并重新设置中心点
marker.addEventListener("dragend", function(e){
point = new BMap.Point(e.point.lng, e.point.lat);
console.log(point);
map.setCenter(point);
})
//添加信息窗口
var opts = {
width : 250, // 信息窗口宽度
height: 100, // 信息窗口高度
title : "百度地图" // 信息窗口标题
}
var str = "<h2>自定义样式</h2>"
var infoWindow = new BMap.InfoWindow(str, opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
//事件监听
map.addEventListener("click", function(e){
console.log(e.point.lng)
});
//定位:浏览器定位,不支持则ip定位,优雅降级。ip定位并不准确
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
/*map.addOverlay(mk);
map.panTo(r.point);
alert('您的位置:'+r.point.lng+','+r.point.lat);*/
map.setCenter(r.point);
}
else {
alert('failed'+this.getStatus());
}
});
</script>
</body>
</html>
注:创建秘钥的时候,名字不可使用中文
百度地图自定义
最新推荐文章于 2023-05-25 09:03:27 发布