15、百度地图插件

最新推荐文章于 2024-01-21 10:00:00 发布

aihaotan8299

最新推荐文章于 2024-01-21 10:00:00 发布

阅读量311

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/weizhen/p/5861664.html

版权

1、调用百度地图的js,api,进行地图，和位置，还有全景的展现

<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: 80%;height: 80%;overflow: hidden;margin:0;}
        #panorama {height: 50%;overflow: hidden;}
        #normal_map {height:50%;overflow: hidden;}
    </style>
</head>
<body>
    <div id="panorama"></div>
    <div id="normal_map"></div>
    <script type="text/javascript">
    //全景图展示
    var panorama = new BMap.Panorama('panorama');
    panorama.setPosition(new BMap.Point(116.311573,40.058339)); //根据经纬度坐标展示全景图
    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);
    });
    //普通地图展示
    var mapOption = {
            mapType: BMAP_NORMAL_MAP,
            maxZoom: 18,
            drawMargin:0,
            enableFulltimeSpotClick: true,
            enableHighResolution:true
        }
    var map = new BMap.Map("normal_map", mapOption);
    var testpoint = new BMap.Point(116.311573,40.058339);
    map.centerAndZoom(testpoint, 18);
    var marker=new BMap.Marker(testpoint);
    marker.enableDragging();
    map.addOverlay(marker);  
    marker.addEventListener('dragend',function(e){
        panorama.setPosition(e.point); //拖动marker后，全景图位置也随着改变
        panorama.setPov({heading: -40, pitch: 6});}
    );
    </script>
    
</body>
</html>

结果如下图所示

转载于:https://www.cnblogs.com/weizhen/p/5861664.html

aihaotan8299

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
15、百度地图插件

1、调用百度地图的js,api,进行地图，和位置，还有全景的展现<head> <title>普通地图&全景图</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type...
复制链接

扫一扫