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

  

1、路在何方? 路在脚下 2、何去何从? 每个人都在探索,未来的方向在何处。如果说某些方向是世人已经公认的,那么就先按照公认的去走吧(ps:站在巨人的肩膀上看世界会清晰)。 如果说方向,当今世人还不清晰准确。那么就大胆往前走吧,对与错并不重要。心中的方向更加重要。
原文地址:https://www.cnblogs.com/yuanjili666/p/11788655.html