离线环境下使用百度地图（js版）（展示自己的地图瓦片）3.0版本api

vue版请查看我的另一篇文章

案例:

设置覆盖物+标注提示文字:

<script>
    // 百度地图API功能
    var map = new BMap.Map("map",{ mapType: BMAP_HYBRID_MAP });   
    var point = new BMap.Point(120.55294, 41.665515); // 创建Map实例
    map.centerAndZoom(point, 18); // 初始化地图,设置中心点坐标和地图级别
       
    
    /*添加标注++++++开始*/
    // 创建标注
    var marker = new BMap.Marker(point);  
	map.addOverlay(marker);  
    // 将标注添加到地图中，配合覆盖物实现文字提示
	var label = new BMap.Label("我是文字标注哦",{offset:new BMap.Size(20,-20)});
	marker.setLabel(label);
    /*添加标注++++++结束*/


    /*添加覆盖物++++++开始*/
    var circle = new BMap.Circle(new BMap.Point(120.55294, 41.665515),15,{
       fillColor: 'red', //设置圆形的填充颜色为红色
        fillOpacity: 0.5, //填充色透明度
        strokeColor:"blue", //设置圆形的边框颜色为蓝色
        strokeWeight:2, //设置圆形边框的宽度为 2 像素
        strokeOpacity:0.1 //设置圆形边框的透明度为 0.1（即 10%透明
    });
     //创建圆 
    map.addOverlay(circle); 
    //给覆盖物添加事件
    circle.addEventListener("click",attribute);
    function attribute(){
		var p = circle.point;  //获取marker的位置
      
        
		window.alert("marker的位置是" + p.lng + "," + p.lat);    
	}
     /*添加覆盖物++++++结束*/

 
    map.setCurrentCity("朝阳");          // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true);
</script>

设置标注的跳动动画的效果和重新设置标注提示的内容，给标注添加点击事件:

<script>
    // 百度地图API功能
    var map = new BMap.Map("map",{ mapType: BMAP_HYBRID_MAP });   
    var point = new BMap.Point(120.55294, 41.665515); // 创建Map实例
    map.centerAndZoom(point, 18); // 初始化地图,设置中心点坐标和地图级别
       
    
    /*添加标注++++++开始*/
    //自定义marker---Size为图片大小，anchor为偏移量
 

    // 创建标注
    var marker = new BMap.Marker(point);  
	map.addOverlay(marker);  
    // 将标注添加到地图中，配合覆盖物实现文字提示
	var label = new BMap.Label("我是文字标注哦",{offset:new BMap.Size(-18,-20)});
	marker.setLabel(label);
    marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
        marker.addEventListener("click", function() {
  // 在这里添加点击事件的处理逻辑
  alert("你点击了标记！");
});
    function ssa(){
        label.setContent("新的文字标注内容");
 alert("sjdfk");
 
// 清除动画效果
marker.setAnimation(null);
    }
    setTimeout(ssa,5000)
    /*添加标注++++++结束*/


    /*添加覆盖物++++++开始*/
    var circle = new BMap.Circle(new BMap.Point(120.55294, 41.665515),15,{
        fillColor: 'green',
        strokeColor:"blue", 
        fillOpacity: 0.3, 
        strokeWeight:2, 
        strokeOpacity:0.3
    });
     //创建圆 
    map.addOverlay(circle); 
    //给覆盖物添加事件
    circle.addEventListener("click",attribute);
    function attribute(){
		var p = circle.point;  //获取marker的位置
      
        
		window.alert("marker的位置是" + p.lng + "," + p.lat);    
	}
     /*添加覆盖物++++++结束*/

 
    map.setCurrentCity("朝阳");          // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true);
</script> 

增加线

        /* 增加折线============开始 */
        var polyline = new BMap.Polyline([
        new BMap.Point(120.550449, 41.666586),
        new BMap.Point(120.550207, 41.665832),
        new BMap.Point( 120.552304,41.665633),
        new BMap.Point( 120.553971,41.665444),
        new BMap.Point(  120.554034,41.665609),
        new BMap.Point(  120.555729, 41.665471),
        new BMap.Point(   120.556601, 41.667068),
        new BMap.Point(    120.552388,41.66698),
        new BMap.Point(120.552284,41.666387),
        new BMap.Point(120.550449, 41.666586),
        ], {strokeColor:"red", strokeWeight:2, strokeOpacity:0.5});   //创建折线
        	map.addOverlay(polyline);   
            
        //增加折线============结束

获取坐标信息:

	map.addEventListener("click",function(e){
		layer.alert(e.point.lng + "<br>" + e.point.lat);
	});

给标注换图标:

 //创建小狐狸
        var myIcon = new BMap.Icon("./燃脂.png", new BMap.Size(50, 50));
        var marker2 = new BMap.Marker(point, { icon: myIcon });  // 创建标注
        map.addOverlay(marker2);

开启信息窗口

	    map.openInfoWindow(new BMap.InfoWindow("天安门坐落在中国北京市中心,故宫的南侧,<br>与天安门广场隔长安街相望,是清朝皇城的大门..."), new BMap.Point(120.550685, 41.66632)); 

设置地图的显示范围，显示层级

        // 获取当前显示范围
        var bs = map.getBounds();   //获取可视区域
	var bssw = bs.getSouthWest();   //可视区域左下角
	var bsne = bs.getNorthEast();   //可视区域右上角
	layer.alert("当前地图可视范围是：<br/>" + bssw.lng.toFixed(6) + ", " + bssw.lat.toFixed(6) + "<br/>到<br/>" + bsne.lng.toFixed(6) + ", " + bsne.lat.toFixed(6));
    // 获取当前地图层级
    if( typeof map != 'undefined' ){
    map.addEventListener("zoomend", function(e){
      layer.msg('地图级别: '+map.getZoom() + (map.getZoom() <17?', 示例中只有17级到19地图,超过的无法显示!':''), {'offset':'b'});
      if(map.getZoom()<17){
        map.setZoom(18)
      }
    });
  }
 
        //  设置地图显示范围
 
	var b = new BMap.Bounds(new BMap.Point(120.549782, 41.663656),new BMap.Point(120.556098, 41.667374));
	try {	
		BMapLib.AreaRestriction.setBounds(map, b);
	} catch (e) {
		alert(e);
	}