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

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

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

代码如下:


<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>

点个赞再走吧~~

你可能感兴趣的:(HTML)