百度地图自定义

<!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>
注：创建秘钥的时候，名字不可使用中文
猜你喜欢
