HTML5-调用百度地图API进行地理定位的实例

最新推荐文章于 2024-06-12 13:52:41 发布

Kobe_G

最新推荐文章于 2024-06-12 13:52:41 发布

阅读量3.2k

点赞数 5

分类专栏： HTML 文章标签：百度地图接口百度地图案例

本文链接：https://blog.csdn.net/Kobe_G/article/details/86010974

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

今天给大家分享一个H5中的百度地图API案例，话不多说，直接上图：

在这里插入图片描述

在浏览器中打开之后，这个盒子有上下两部分，上面是3D地图，下面是普通地图，这是使用了百度地图接口后的效果，使用百度地图接口必须拿到百度地图的密钥，密钥博主已经在代码中给出，可以直接使用，密钥也可以自己去申请。

代码如下：

<!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=	DarF2LCCGzn6T16zgy8ZPkvYYE5CT6fu"></script>
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            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.404125, 39.91405)); //根据经纬度坐标展示全景图
    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.404125, 39.91405);
    map.centerAndZoom(testpoint, 18);
    var marker = new BMap.Marker(testpoint);
    marker.enableDragging();
    map.addOverlay(marker);
    map.enableScrollWheelZoom(true);
    map.addControl(new BMap.MapTypeControl());
    marker.addEventListener('dragend', function (e) {
            panorama.setPosition(e.point); //拖动marker后，全景图位置也随着改变
            panorama.setPov({heading: -40, pitch: 6});
        }
    );
</script>
</body>
</html>

点个赞再走吧~~

Kobe_G

关注

5
点赞
踩
12

收藏

觉得还不错? 一键收藏
12
评论
HTML5-调用百度地图API进行地理定位的实例

今天给大家分享一个H5中的百度地图案例，话不多说，直接上图：在浏览器中打开之后，这个盒子有上下两部分，上面是3D地图，下面是普通地图，这是使用了百度地图接口后的效果，使用百度地图接口必须拿到百度地图的密钥，密钥博主已经在代码中给出，可以直接使用，密钥也可以自己去申请。代码如下：&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt; &a
复制链接

扫一扫

专栏目录