master

分支 (1)

管理

管理

master

map
/
baidumap.html

<!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>Hello, World</title>
    <style type="text/css">
        html {
            height: 100%
        }

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

        #container {
            height: 100%
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=23b2ad2ab42c26c69306e11e4522590f">
        //v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
        //v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"
    </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.865); // 创建点坐标
        map.addControl(new BMap.NavigationControl());
        map.addControl(new BMap.ScaleControl());
        map.addControl(new BMap.OverviewMapControl());
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
        map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别

        // 定义一个控件类,即function
        function ShowLocationControl() {
            // 默认停靠位置和偏移量
            this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
            this.defaultOffset = new BMap.Size(10, 10);
        }

        // 通过JavaScript的prototype属性继承于BMap.Control
        ShowLocationControl.prototype = new BMap.Control();

        // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
        // 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
        ShowLocationControl.prototype.initialize = function(map) {
                // 创建一个DOM元素
                var div = document.createElement("div");
                // 添加文字说明

                map.addEventListener("mousemove", function(e) {
                    var lon = e.point.lng;
                    var lat = e.point.lat;
                    div.innerHTML = lon + ";" + lat;
                });

                // 设置样式
                div.style.width = "195px";
                div.style.border = "1px solid gray";
                div.style.backgroundColor = "white";

                // 添加DOM元素到地图中
                map.getContainer().appendChild(div);
                // 将DOM元素返回
                return div;
            }
            // 创建控件
        var mylocationCtrl = new ShowLocationControl();
        // 添加到地图当中
        map.addControl(mylocationCtrl);

        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                map.panTo(r.point);
                var mk = new BMap.Marker(r.point);
                map.addOverlay(mk);
                console.log('百度地图位置：' + r.point.lng + ',' + r.point.lat);
                // alert('您的位置：' + r.point.lng + ',' + r.point.lat);
            } else {
                // alert('failed' + this.getStatus());
            }
        }, {
            enableHighAccuracy: true
        });


        // function getLocation() {
        //     var options = {
        //         enableHighAccuracy: false
        //     }
        //     if (navigator.geolocation) {
        //         //浏览器支持geolocation
        //         navigator.geolocation.getCurrentPosition(onSuccess, onError);

        //     } else {
        //         //浏览器不支持geolocation
        //     }
        // }

        // //成功时
        // function onSuccess(position) {
        //     //返回用户位置
        //     //经度
        //     var longitude = position.coords.longitude;
        //     //纬度
        //     var latitude = position.coords.latitude;

        //     //使用百度地图API
        //     console.log('浏览器获取当前位置：' + longitude + ',' + latitude);
        //     //创建地图实例
        //     var point = new BMap.Point(longitude, latitude);
        //     var mk1 = new BMap.Marker(point);
        //     map.addOverlay(mk1);
        // }


        // //失败时
        // function onError(error) {
        //     switch (error.code) {
        //         case 1:
        //             alert("位置服务被拒绝");
        //             break;

        //         case 2:
        //             alert("暂时获取不到位置信息");
        //             break;

        //         case 3:
        //             alert("获取信息超时");
        //             break;

        //         case 4:
        //             alert("未知错误");
        //             break;
        //     }

        // }
        // getLocation();
    </script>
</body>

</html>