Skip to content

1
1024程序员开源挑战赛

Five-菜鸟级 / 1024程序员开源挑战赛
该项目与 Fork 源项目分叉

Fork自 GitCode / 1024程序员开源挑战赛（10.23-11.14）

通知 1
Star 1
Fork 0
1
1024程序员开源挑战赛
切换分支/标签
查找文件 普通视图历史永久链接Permalink
bd.html 10.2 KB
Newer Older
Five-菜鸟级's avatar
init  
Five-菜鸟级 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>百度地图API自定义地图</title>
<style>
	html,body{margin:0;padding:0; width:100vw!important; height: 100vh!important;position: relative; overflow: hidden; }
	.iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
	.iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
	.infoBoxContent{font-size:12px;padding:10px 8px;margin-bottom:3px;box-sizing: border-box;-moz-box-sizing:border-box; /* Firefox */-webkit-box-sizing:border-box; /* Safari */ line-height: 1.5;letter-spacing: 1px;background: rgba(255,255,255,0.9); border: none; }
	.infoBoxContent>i:last-child{display: block; content: ""; width: 15px;transform: rotate(45deg); height: 15px;position: absolute;bottom:-5px;left: 50%; margin-left:-8px;z-index: -1; background:inherit ;}
	.infoBoxContent *{line-height: 1.5; margin: 0;padding: 0; }
	.BMap_cpyCtrl.BMap_noprint.anchorBL{display: none!important;}
	.anchorBL{display: none!important;}
	.btnList{ position: absolute; bottom: 0;left: 0; height: 20px;width: 100vw;background: transparent; text-align: center;}
	.btnList >span{ display: inline-block; margin-right:20px;}
	.btnList >span>i{ display: block; position: relative; text-align: center;color: #333;font-size:12px; margin-top:-5px; letter-spacing: 2px;}
	.gotoDH{display: block; position: absolute;background-color: rgba(255,255,255,0.9); padding-top:5px; box-shadow: 0 4px 8px 2px rgba(67, 108, 221, 0.3); width: 40px;height: 35px; border-radius: 20px; text-align:center ; bottom: 8%;right: 1%;}
</style>
<script src="https://api.map.baidu.com/api?v=3.0&ak=ONwdanPtvCDLHBSm184T2ynP"></script>
<script src="https://api.map.baidu.com/library/InfoBox/1.2/src/InfoBox_min.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=608d75903d29ad471362f8c58c550daf"></script>
</head>

<body onload="initMap();">
  <!--百度地图容器-->
  <div style="width:100vw;height:100vh;min-height: 100px;" id="dituContent"></div>
  <a class="gotoDH" id="gotoDHID" style="display: none;" href="javascript:gotoDH()"><svg t="1604544065701" class="icon" viewBox="0 0 1163 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="40447" width="30" height="30"><path d="M972.450909 566.458182c72.704-100.584727 128.581818-185.972364 128.581818-282.530909a275.409455 275.409455 0 1 0-550.562909 0c0 86.714182 47.872 169.495273 110.452364 258.955636l-75.310546 25.786182-145.943272-49.361455a198.190545 198.190545 0 0 0 29.579636-97.28 150.644364 150.644364 0 1 0-300.544 0 220.788364 220.788364 0 0 0 37.236364 110.452364h-0.651637L0 1024l310.202182-125.230545L592.453818 1024l264.983273-125.230545L1163.636364 1024z m-146.618182-420.445091a138.030545 138.030545 0 1 1-133.655272 137.937454 135.842909 135.842909 0 0 1 133.678545-137.937454z m-506.763636 197.818182a78.452364 78.452364 0 1 1-72.983273 78.266182 75.822545 75.822545 0 0 1 73.006546-78.312728z m532.945454 480.581818L592.290909 944.872727l-276.945454-120.413091-206.545455 100.654546 118.365091-326.725818 19.293091-3.909819c23.505455 33.629091 49.198545 69.096727 72.634182 108.497455 29.160727-49.896727 59.834182-91.322182 86.109091-129.396364l180.712727 62.068364 113.105454-39.377455c41.402182 56.808727 85.946182 116.759273 126.836364 182.830546 38.330182-62.976 77.963636-117.922909 115.130182-168.890182l119.342545 318.836364z m-318.138181-185.157818a81.175273 81.175273 0 0 0-80.942546 81.454545c0 44.939636 80.942545 135.400727 80.942546 135.400727s80.965818-90.461091 80.965818-135.400727a81.175273 81.175273 0 0 0-80.872727-81.501091z m0 122.042182a40.052364 40.052364 0 1 1 39.842909-40.052364 39.936 39.936 0 0 1-39.749818 40.005818z" p-id="40448" fill="#1296db"></path></svg></a>
</body>
<script>
	  function calcPageWidth(doc) {
        var cWidth = Math.max(doc.body.clientWidth, doc.documentElement.clientWidth)
        var sWidth = Math.max(doc.body.scrollWidth, doc.documentElement.scrollWidth)
        var width  = Math.max(cWidth, sWidth)
        return width;
     }
	function getParam(name) {
		return location.href.match(new RegExp('[?&]' + name + '=([^?&]+)', 'i')) ? decodeURIComponent(RegExp.$1) : '';
	}

	var centerParam = getParam('center');
	var zoomParam = getParam('zoom');
	var widthParam = getParam('bwidth');
	var heightParam = getParam('bheight');
	var markersParam = getParam('center');
	var infoBoxHtml = getParam('boxhtml');
	var infoBoxColor = getParam('bgColor');
	var BDDH = getParam('DH');
	var BDSF = getParam('SF');
	var dName = getParam('dName')||"目的地";
	var markersArr =""
	var map="";
	//创建和初始化地图函数：
	function initMap(){
		// [FF]切换模式后报错
		if (!window.BMap) {
			return;
		}
		var dituContent = document.getElementById('dituContent');
		// console.log(window.s)
		dituContent.style.width = "100vw";
		dituContent.style.height ="100vh";

		createMap();//创建地图
		setMapEvent();//设置地图事件
		addMapControl();//向地图添加控件

		// 创建标注
		 markersArr = markersParam.split(',');
		var point = new BMap.Point(markersArr[0], markersArr[1]);
		var marker = new BMap.Marker(point);
		map.addOverlay(marker); // 将标注添加到地图中
		// 
		if(infoBoxHtml){
			infoBoxHtml = infoBoxHtml.replace(/\￥/g,"'").replace(/\^/g,'"').replace(/\】/g,'>').replace(/\【/g,'<');
			let html = '<div class="infoBoxContent" id="infoBoxContentID"><p>'+infoBoxHtml+'</p><i></i></div>' || '<div class="infoBoxContent" id="infoBoxContentID" ><p>信息弹框</p><i></i></div>'
		var infoBox = new BMapLib.InfoBox(map,html,{
			boxStyle:{
			background:"rgba(255,255,255,0)"
			,width: widthParam || "270px"
			,closeIconMargin: "1px 1px 0 0"
	        ,enableAutoPan: true
	        ,align: INFOBOX_AT_TOP
		   }
		})
		infoBox.open(marker);
		document.getElementById("infoBoxContentID").style.width = widthParam;
		document.getElementById("infoBoxContentID").style.height = heightParam;
		if(infoBoxColor){
			infoBoxColor=infoBoxColor.replace(/\@/g,'#').replace(/\+/g,'(').replace(/\-/g,')');
			document.getElementById("infoBoxContentID").style.background = infoBoxColor || "rgba(255,255,255,0.95)";
		}
		
		marker.addEventListener("click", function(){ 
		if(infoBox._isOpen)infoBox.close();
		else{
			infoBox.open(marker);
			document.getElementById("infoBoxContentID").style.width = widthParam;
		   document.getElementById("infoBoxContentID").style.height = heightParam; 
		   if(infoBoxColor){
			infoBoxColor=infoBoxColor.replace(/\@/g,'#').replace(/\+/g,'(').replace(/\-/g,')');
			document.getElementById("infoBoxContentID").style.background = infoBoxColor || "rgba(255,255,255,0.95)";
		  }
         }
        });  
	  }

	  BDDH=="true"? document.getElementById('gotoDHID').style.display="block":'';
	}

	//创建地图函数：
	function createMap(){
		 map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
		var centerArr = centerParam.split(',');
		var point = new BMap.Point(centerArr[0], centerArr[1]);//定义一个中心点坐标
		map.centerAndZoom(point, zoomParam);//设定地图的中心点和坐标并将地图显示在地图容器中
		window.map = map;//将map变量存储在全局
	}

	//地图事件设置函数：
	function setMapEvent(){
		map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
		map.enableScrollWheelZoom();//启用地图滚轮放大缩小
		map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
		map.enableAutoResize();
		map.enableKeyboard();//启用键盘上下左右键移动地图
	}

	//地图控件添加函数：
	function addMapControl(){
		//向地图中添加缩放控件
	if(BDSF=="true"){
		var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
		map.addControl(ctrl_nav);
	 }
		
	}
	function bd_encrypt(gg_lng, gg_lat) {
	var X_PI = Math.PI * 3000.0 / 180.0;
	var x = gg_lng, y = gg_lat;
	var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * X_PI);
	var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * X_PI);
	var bd_lng = z * Math.cos(theta) + 0.0065;
	var bd_lat = z * Math.sin(theta) + 0.006;
	return {
		bd_lat: bd_lat,
		bd_lng: bd_lng
	};
	}
var geolocation2='';
	function gotoDH(){
		AMap.plugin('AMap.Geolocation', function() {
			geolocation2 = new AMap.Geolocation({
				enableHighAccuracy: true,//是否使用高精度定位，默认:true
				timeout: 10000,          //超过10秒后停止定位，默认：5s
				buttonPosition:'RB',    //定位按钮的停靠位置
				buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
				zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点

			});
	  AMap.event.addListener(geolocation2, 'complete', onComplete);//返回定位信息
      AMap.event.addListener(geolocation2, 'error', onError);//返回定位出错信息
		geolocation2.getCurrentPosition(function(status,result){
			if(status=='complete'){	
			
			  let rp = bd_encrypt(result.position.lng, result.position.lat)
			  gotoDHFun(rp)
			 }else{
			}
		})
    	});
	}
	
	function gotoDHFun(rp){
	let _k = "transit";
	let _openUrl= 'http://api.map.baidu.com/direction?origin=latlng:'+rp.bd_lat+','+rp.bd_lng+'|name:当前位置&destination=latlng:'+markersArr[1]+','+markersArr[0]+'|name:'+dName+'&mode='+_k+'&region=成都&output=html&src=webapp.baidu.openAPIdemo';
			  if(!document.getElementById("openHrefID")) { 
				let a = document.createElement('a');
				  a.setAttribute('href', _openUrl);
			      a.setAttribute('id','openHrefID' );
			      a.setAttribute('target', '_blank');
				  document.body.appendChild(a);
				  a.click()
              }else{
				let a = document.getElementById("openHrefID");
				a.setAttribute('href', _openUrl);
				a.click()
			  }
	}
	function onComplete(obj){
       console.log(obj.message);
    }

    function  onError(obj){
    //   console.log(obj.message);
	  var geolocationBD = new BMap.Geolocation();
	   geolocationBD.enableSDKLocation();
		geolocationBD.getCurrentPosition(function(r){
			if(this.getStatus() == BMAP_STATUS_SUCCESS){
				gotoDHFun({bd_lat: r.point.lat,bd_lng: r.point.lng})
			}
			else {
				alert('获取定位失败请重试：'+this.getStatus());
			}        
		});
    }       
    
</script>
</html>