用户注册



邮箱：

密码：

用户登录


邮箱：

密码：
记住登录一个月忘记密码？

发表随想


还能输入：200字
云代码 - html代码库

751BaiMapJS.html

2020-07-29 作者： 朱文波30举报

[html]代码库

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
	<title>地图官网展示效果</title>  
</head>  
<body>    
    <div id="allmap"></div>  
</body>  
</html>  
<script type="text/javascript">  
	// 百度地图API功能  
	var map = new BMap.Map("allmap");            // 创建Map实例  
	var point = new BMap.Point(116.42, 39.93); // 创建点坐标  
	map.centerAndZoom(point, 15);                // 初始化地图,设置中心点坐标和地图级别  
	map.enableScrollWheelZoom();                 // 启用滚轮放大缩小
	map.addControl(new BMap.ZoomControl());      // 添加地图缩放控件 
	map.addControl(new BMap.ScaleControl());     // 添加比例尺控件
	
	// 定位城市
	function LoadMap(city) {                       
		map.centerAndZoom(city, 12); // 初始化地图,设置中心点坐标和地图级别 15更详细
		map.enableScrollWheelZoom();                 // 启用滚轮放大缩小
		map.addControl(new BMap.ZoomControl());      // 添加地图缩放控件 
		map.addControl(new BMap.ScaleControl());     // 添加比例尺控件
	}	
 
	// 根据中心点关键字周边搜索
	function SearchNearbyMap(city, key) {
		map.centerAndZoom(city, 12);                 
		var point = new BMap.Point(116.42, 39.93); // 默认中心点
		var marker = new BMap.Marker(point);         // 计划调用自定义
		
		//清除覆盖物再加载，否则多次点击不断添加
		//map.removeOverlay(Overlay);                // 清除指定覆盖物
        map.clearOverlays();                         // 清除全部
 
		var local = new BMap.LocalSearch(map, {
			renderOptions:{map: map, autoViewport:true}
		});
		local.searchNearby(key, city);
		
		map.addControl(new BMap.NavigationControl()); //左上角控件
		map.enableScrollWheelZoom();                 // 启用滚轮放大缩小
		map.addControl(new BMap.ZoomControl());      // 添加地图缩放控件 
		map.addControl(new BMap.ScaleControl());     // 添加比例尺控件
	}
	
	// 根据中心点关键字周边搜索 停车场
	function SearchCarMap(city) {
		map.centerAndZoom(city, 12);                 
        map.clearOverlays();                         // 清除全部覆盖物再加载，否则多次点击不断添加
		var local = new BMap.LocalSearch(map, {
			renderOptions:{map: map, autoViewport:true}
		});
		local.searchNearby("停车场", city);
		
		map.addControl(new BMap.NavigationControl()); //左上角控件
		map.enableScrollWheelZoom();                 // 启用滚轮放大缩小
		map.addControl(new BMap.ZoomControl());      // 添加地图缩放控件 
		map.addControl(new BMap.ScaleControl());     // 添加比例尺控件
	}
 
    // 当前位置定位 751D·PARK北京时尚设计广场 
    function LocateMyPlcae() {
    	map.clearOverlays(); 
    	var pointA_A =116.42;
    	var pointA_B = 39.93;
    	var pointA = new BMap.Point(pointA_A, pointA_B);  
 
    	var pointB_A = 116.42;
    	var pointB_B = 39.93;
    	var pointB = new BMap.Point(pointB_A, pointB_B); 
    	var pointC = new BMap.Point((pointA_A+pointB_A)/2, 
    						(pointA_B+pointB_B)/2); 
    	map.centerAndZoom(pointC, 15);
    	
		var markerA = new BMap.Marker(pointA);
		var markerB = new BMap.Marker(pointB); 
		// 将标注添加到地图中
		//map.addOverlay(markerA);                      
		//map.addOverlay(markerB);  
 
		// 创建标注1 
		addMarker(pointA, "751D·PARK北京时尚设计广场", "地址：751D·PARK北京时尚设计广场");          
        // 创建标注2 
    	addMarker(pointB, "751D·PARK北京时尚设计广场", "地址：751D·PARK北京时尚设计广场");          
  
    	// 开始测距 定义折线
    	var polyline = new BMap.Polyline([pointA, pointB], { strokeColor: "orange", strokeWeight: 6, strokeOpacity: 0.5 });   
    	map.addOverlay(polyline);                       // 添加折线到地图上 
 
    	// 监听标注事件 获取两点距离,保留小数点后两位  
    	polyline.addEventListener("click", function () {    //          
        	alert('两地距离是：' + 
        		(map.getDistance(pointA, pointB)).toFixed(2) + ' 米。');   
    	});
 
		map.enableScrollWheelZoom();                 // 启用滚轮放大缩小
		map.addControl(new BMap.ZoomControl());      // 添加地图缩放控件 
		map.addControl(new BMap.ScaleControl());     // 添加比例尺控件
		map.addControl(new BMap.NavigationControl());
		map.addControl(new BMap.OverviewMapControl());
 
    }
 
    function GetResMyPlace() {
    	map.clearOverlays(); 
 
    	var pointA_A = 116.42;
    	var pointA_B = 39.93;
    	var pointA = new BMap.Point(pointA_A, pointA_B);  
 
    	var pointB_A = 116.42;
    	var pointB_B = 39.93;
    	var pointB = new BMap.Point(pointB_A, pointB_B); 
 
    	var pointC = new BMap.Point((pointA_A+pointB_A)/2, 
    						(pointA_B+pointB_B)/2); 
    	map.centerAndZoom(pointC, 15);
    	map.enableScrollWheelZoom();                 // 启用滚轮放大缩小
    	
    	var markerA = new BMap.Marker(pointA);
		var markerB = new BMap.Marker(pointB);  
 
		// 创建标注1 
		addMarker(pointA, "751D·PARK北京时尚设计广场", "地址：751D·PARK北京时尚设计广场");          
        // 创建标注2 
    	addMarker(pointB, "751D·PARK北京时尚设计广场", "地址：751D·PARK北京时尚设计广场");          
  
    	// 开始测距 定义折线        
    	var polyline = new BMap.Polyline([pointA, pointB], { strokeColor: "orange", strokeWeight: 6, strokeOpacity: 0.5 });    
    	map.addOverlay(polyline);                       // 添加折线到地图上 
 
    	// 监听标注事件 获取两点距离,保留小数点后两位  
    	polyline.addEventListener("click", function () {    //          
        	alert('两地距离是：' + 
        		(map.getDistance(pointA, pointB)).toFixed(2) + ' 米。');   
    	});  
 
    	/*
    	var local = new BMap.LocalSearch(map, {
	  		renderOptions:{map: map}
		});
    	// 自己规定范围
		var bs = new BMap.Bounds(pointA, pointB);
		local.searchInBounds("餐馆", bs);
		*/
 
		var local = new BMap.LocalSearch(map, {
			renderOptions:{map: map}
		});
		local.search("餐馆");
		
		map.addControl(new BMap.ZoomControl());      // 添加地图缩放控件 
		map.addControl(new BMap.ScaleControl());     // 添加比例尺控件
		map.addControl(new BMap.NavigationControl());
		map.addControl(new BMap.OverviewMapControl());
 
    }
 
    // 导航
    function RouteMyPlace() {
    	map.clearOverlays(); 
 
    	var pointA_A = 116.42;
    	var pointA_B = 39.93;
    	var pointA = new BMap.Point(pointA_A, pointA_B);  
 
    	var pointB_A = 116.42;
    	var pointB_B = 39.93;
    	var pointB = new BMap.Point(pointB_A, pointB_B); 
    	var pointC = new BMap.Point((pointA_A+pointB_A)/2, 
    						(pointA_B+pointB_B)/2); 
    	map.centerAndZoom(pointC, 15);
    	map.enableScrollWheelZoom();                 // 启用滚轮放大缩小
    	
    	var markerA = new BMap.Marker(pointA);
		var markerB = new BMap.Marker(pointB);  
    	map.addOverlay(markerA);
    	map.addOverlay(markerB);
 
		markerA.addEventListener("click", function(){
			/*start|end：（必选）
			{name:string,latlng:Lnglat}
			opts:
			mode：导航模式，固定为
			BMAP_MODE_TRANSIT、BMAP_MODE_DRIVING、
			BMAP_MODE_WALKING、BMAP_MODE_NAVIGATION
			分别表示公交、驾车、步行和导航，（必选）
			region：城市名或县名  给定region认为起点和终点都在同一城市，除非单独给定起点或终点城市
			origin_region/destination_region：同上
			*/
			var start = {
				 name:"751D·PARK北京时尚设计广场"
			}
			var end = {
				name:"751D·PARK北京时尚设计广场"
			}
			var opts = {
				mode:BMAP_MODE_DRIVING,
				region:"751D·PARK北京时尚设计广场"
			}
			var ss = new BMap.RouteSearch();
			ss.routeCall(start,end,opts);
		});
 
		map.addControl(new BMap.ZoomControl());      // 添加地图缩放控件 
		map.addControl(new BMap.ScaleControl());     // 添加比例尺控件
		map.addControl(new BMap.NavigationControl());
		map.addControl(new BMap.OverviewMapControl());
    }
 
    // 自定义创建标注  
    function addMarker(point, a, b) {  
        var marker = new BMap.Marker(point);  
        map.addOverlay(marker);  
        marker.addEventListener("click", function () {    // 监听标注事件    
            var opts = {         // 创建信息窗口  
                width: 250,      // 信息窗口宽度      
                height: 100,     // 信息窗口高度      
                title: a         // 信息窗口标题     
            }  
            var infoWindow = new BMap.InfoWindow(b, opts);  // 创建信息窗口对象      
            map.openInfoWindow(infoWindow, point);          // 打开信息窗口                 
        });  
    }
 
</script>


网友评论    (发表评论)


发表评论：

评论须知：

  • 1、评论每次加2分，每天上限为30；
  • 2、请文明用语，共同创建干净的技术交流环境；
  • 3、若被发现提交非法信息，评论将会被删除，并且给予扣分处理，严重者给予封号处理；
  • 4、请勿发布广告信息或其他无关评论，否则将会删除评论并扣分，严重者给予封号处理。


扫码下载

加载中，请稍后...

输入口令后可复制整站源码

加载中，请稍后...