Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

百度地图/百度搜索 #15

Open
spruceatmc opened this issue Jul 16, 2022 · 0 comments
Open

百度地图/百度搜索 #15

spruceatmc opened this issue Jul 16, 2022 · 0 comments

Comments

@spruceatmc
Copy link
Owner

百度地图/百度搜索

spruce 2022/07/16 代码功能实现

百度地图要用ctrl+f或者你自己找里面"ak="，将"="后的ak自己去百度控制台申请

百度地图

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<title>Document</title>
		<!-- 这里注意要将等号后面的换成自己的秘钥哟 -->
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak="></script>

		<style type="text/css">
			html {
				height: 100%
			}
			body {
				height: 100%;
				margin: 0px;
				padding: 0px
			}
			#container {
				height: 100%
			}
		</style>
	</head>
	<body>
		<!-- 用于装地图的容器，样式设置为全屏 -->
		<div id="container"></div>
	</body>
	<script>
		//1:创建地图实例
		var map = new BMap.Map("container");
		//2:设置中心坐标
		var point = new BMap.Point(106.60206394754, 29.4287806047);
		//这里以天安门为中心为例
		//3:初始化和展示级别
		map.centerAndZoom(point, 16);
		//4:鼠标滚动控制缩放
		map.enableScrollWheelZoom(true)
	</script>
</html>

百度搜索

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			@charset "utf-8";
			/* CSS Document */
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.ss {
				border: 1px solid #000000;
			}
			.ss li {
				/*border-bottom: 1px solid #999999;*/
				padding: 10px 20px;
				text-align: left;
			}
			.ss li:hover {
				background-color: #e2e2e2;
				cursor: pointer;
			}
			#top {
				float: right;
			}

			#top li {
				padding: 10px;
				float: left;
			}
			#top a {
				color: #000000;
				font-size: 14px;
				font-weight: 600;
			}
			#top a:hover {
				color: #0A09BE
			}

			#img_baidu {
				height: 150px;
				clear: both;
				display: block;
				margin: 0 auto;
				background: #FFFFFF;
			}

			#text_baidu {
				width: 680px;
				margin: 36px auto;
				position: relative;
				background: #FFFFFF;
			}

			#texts {
				width: 558px;
				height: 38px;
				left: 0;
				position: absolute;
				border: blue 1px solid;
			}

			#sub {
				width: 120px;
				height: 40px;
				top: 0;
				right: 0;
				position: absolute;
				background: #467EE9;
				color: #FFFFFF;
				border-style: none;
				font-size: 16px;
			}

			#end {
				text-align: center;
				position: absolute;
				left: 0;
				right: 0;
				bottom: 100px;
				color: #9d9d9d;
				font-size: 12px;
				height: 80px;
				background: #FFFFFF;
			}

			#end p {
				color: #000000;
				font-size: 14px;
			}

			#end a {
				color: #9d9d9d;
				font-size: 12px;
			}
		</style>
		<!--<script src="http://localhost:80/js/Method.js"></script>-->
	</head>
	<body>
		<br>
		<div id="top" >
			<ul>
				<li>
					<a href="#">新闻 </a>
				</li>
				<li>
					<a href="#">hao123 </a>
				</li>
				<li>
					<a href="#">地图 </a>
				</li>
				<li>
					<a href="#">视频 </a>
				</li>
				<li>
					<a href="#">贴吧 </a>
				</li>
				<li>
					<a href="#">学术 </a>
				</li>
				<li>
					<a href="#">登录 </a>
				</li>
				<li>
					<a href="#">设置 </a>
				</li>
				<li>
					<a href="#">更多产品 </a>
				</li>
			</ul>
		</div>

		<img src="images/bd_logo1.png" id="img_baidu">

		<div id="text_baidu">
			<form method="post" action="" name="bd">
				<input type="text" id="texts">
				<input type="button" value="百度一下" id="sub" >
			</form>
		</div>

		<div id="end">
			<div>
				<img src="images/zbios_efde696.png" width="60px">
				<p>
					百度
				</p>
			</div>

			<div>
				<a href="#">把百度设为主页 </a>&nbsp;&nbsp;&nbsp; <a href="#">关于百度 </a>&nbsp;&nbsp;&nbsp; <a href="#">About  Baidu</a>&nbsp;&nbsp;&nbsp;<a href="#">百度推广</a>&nbsp;&nbsp;&nbsp;
				<br>

				©2018 Baidu <a href="#">使用百度前必读 </a> &nbsp;&nbsp; <a href="#">意见反馈 </a>&nbsp;&nbsp;京ICP证030173号&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="#">京公网安备11000002000001号</a>&nbsp;&nbsp;&nbsp;
			</div>
		</div>
		<script>
			/*
			*  1、cors
			*  2、jsonp解决
			*  3、websocket解决（不讲解）
			*  （做一个本地服务，这个本地服务访问跨域服务通信，然后再传给本地）中间介质跨域
			*
			*
			* */

			//        Method.$c("div",document.body);
			var script, ul, textSub;
			var texts = document.getElementById("texts");
			var textSub = document.getElementById("sub");

			texts.addEventListener("input", inputHandler);
			textSub.addEventListener("click", subClickHandler);

			function inputHandler(e) {
				search(texts.value);
			}

			function search(searchStr) {
				if (script) {
					script.remove();
					script = null;
				}
				script = document.createElement("script");
				//百度API
				script.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + searchStr + "&json" + "=1&p=3&sid=22084_1436_13548_21120_22036_22073&req=2&csor=0&cb=callback";
				document.body.appendChild(script);
			}

			function callback(obj) {
				if (ul) {
					ul.remove();
					ul = null;
				}
				ul = document.createElement("ul");
				ul.className = "ss";
				ul.style.width = texts.clientWidth + "px";
				for (var i = 0; i < 6; i++) {//搜素框内有几个数据
					var li = document.createElement("li");
					li.textContent = obj.s[i];
					li.addEventListener("click", clickHandler);
					ul.appendChild(li);
				}
				ul.firstElementChild.style = "padding-top:50px";
				//第一个显示出来
				texts.parentElement.insertBefore(ul, texts.nextElementSibling);
			}

			function clickHandler(e) {//百度API
				location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=98012088_10_dg&wd=" + this.textContent + "&rsv_pq=cb75ad3f00000fa1&rsv_t=e991pW4yEPgJGzdMD%2Bdfto2OgQRU12dPWLNRqfNP8twO5%2ByL0pdM%2BqfQ2UhzBJ5vXgzkVHU&rqlang=cn&rsv_enter=1&rsv_sug3=8&rsv_sug1=8&rsv_sug7=101&rsv_sug2=0&inputT=1358&rsv_sug4=68195";
			}

			function subClickHandler(e) {//百度API
				location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=98012088_10_dg&wd=" + texts.value + "&rsv_pq=cb75ad3f00000fa1&rsv_t=e991pW4yEPgJGzdMD%2Bdfto2OgQRU12dPWLNRqfNP8twO5%2ByL0pdM%2BqfQ2UhzBJ5vXgzkVHU&rqlang=cn&rsv_enter=1&rsv_sug3=8&rsv_sug1=8&rsv_sug7=101&rsv_sug2=0&inputT=1358&rsv_sug4=68195";
			}

		</script>
	</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@spruceatmc