15年软件开发经验,只做源码定制!

原创设计 定制开发

满足您的个性化需求

当前位置:首页 前端开发 H5

jq监听滚动条位置和百度地图动态接口

周明亮| 发布于 2021-10-13 01:02:11| 567阅读| 0点赞| 0评论
举报

使用监听滚动条的位置、屏幕宽度来实现一些效果,调取百度地图的动态接口

var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
var clientWidth =document.documentElement.clientWidth || document.body.clientHeight;
//console.log(this.scrollTop)
if(scrollTop>=580 && clientWidth>1200){
     document.querySelector('.index-right').className= "gaibian";
}else{
     document.querySelector('.gaibian').className= "index-right";
 }

上边就可以获得,scrolltop是滚动条距离顶部的距离,clientwidth是屏幕的宽度。

这用就可以用这些值来一些监听滚动条和屏幕宽度的效果,上面的是当滚动条距离顶部大于等于580且屏幕宽度大于1200是实现给.index-right的盒子上加上一个类名gaibian,否则在。gaibian的盒子类名上加index-right。



jq调取百度地图动态接口

在HTML里引入jq和baidu的api和百度js

<script src="http://api.map.baidu.com/api?v=2.0&ak=A1LU7iHS0avqQwPLAxbhKn0UYSQCuRVH"></script>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script><script src="js/jquery.baiduMap.min.js"></script><br/>

然后调取百度的接口

<script type="text/javascript">
			new BaiduMap({
				id: "container1",
				title: {
					text: "北京故宫博物院",
					className: "title"
				},
				content: {
					className: "content",
					text: ["地址:北京市东城区东华门大街", "电话:(010)65131892"]
				},
				point: {
					lng: 116.412222,
					lat: 39.912345
				}
			});
		
			
</script>

id:container1就是要讲百度地图展示的盒子

title、<span style="font-family: 微软雅黑;">content</span><span style="font-family: 微软雅黑;">是默认定位的信息</span>point是调取百度地图用的秘钥
0

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

周明亮
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部