优秀的编程知识分享平台

网站首页 > 技术文章 正文

演示HTML5中的拖曳操作代码详见教材demo3-8

nanyue 2024-09-14 06:23:16 技术文章 5 ℃

演示HTML5中的拖曳操作代码详见教材demo3-8

<!DOCTYPE html>

<html>

<head>

<title>全景图</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript"

src="http://api.map.baidu.com/api?v=2.0&ak=4qXTGvclMqTZXkLsU3twnMA7">

</script>

<style type="text/css">

body, html{

width: 100%;

height: 100%;

overflow: hidden;

margin:0;

font-family:"微软雅黑";

}

#panorama {

height: 100%;

width: 100%;

overflow: hidden;

}

</style>

</head>

<body>

<div id="panorama"></div>

<script type="text/javascript">

var jd="116.349902";

var wd="40.065817";

//全景图展示

var panorama = new BMap.Panorama('panorama');

panorama.setPosition(new BMap.Point(jd, wd)); //根据经纬度坐标展示全景图

panorama.setPov({heading: -40, pitch: 6});

//全景图位置改变后，普通地图中心点也随之改变

panorama.addEventListener('position_changed', function(e){

var pos = panorama.getPosition();

map.setCenter(new BMap.Point(pos.lng, pos.lat));

marker.setPosition(pos);

});

</script>

</body>

</html>

Tags：

猜你喜欢

最近发表
标签列表