风华正茂、时光流逝、真爱时光、努力创建辉煌。

【web】浏览器条用百度的地图API 

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>测试地图</title>
    <style type="text/css">
        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }

        #container {
            width:500px;
            height:350px;
            /* height: 100% */
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=wsdsy4XPvGiR2DyUA1XwY2zFfOEvTxFF">
//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
    </script>
</head>

<body>
    <div id="container"></div>
    <script type="text/javascript">
        // 创建地图实例 
        var map = new BMap.Map("container");
        // 创建点坐标 
        var point = new BMap.Point(116.404, 39.915);
        // 初始化地图，设置中心点坐标和地图级别 
        map.centerAndZoom(point, 15);
        var opts = { anchor: BMAP_ANCHOR_BOTTOM_RIGHT }

        var ove = { anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM }

        map.addControl(new BMap.GeolocationControl(opts));

        map.addControl(new BMap.NavigationControl(ove));

        map.enableScrollWheelZoom();

        map.centerAndZoom(point, 11);


        // 初始化地图， 设置中心点坐标和地图级别
        var scaleCtrl = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT, offset: new BMap.Size(10, 40) });
        map.addControl(scaleCtrl)


        map.addEventListener("click", function (e) {
            console.log(e)
            alert(e.target.Xg)
            alert(e.point.lng + "," + e.point.lat);
        });


    </script>
</body>

</html>

　　

 

 

posted @ 2019-11-03 19:53  野马,程序源改造新Bug  阅读(241)  评论(0)    收藏  举报