Html5 百度地图定位

最新推荐文章于 2023-04-27 14:16:00 发布

lovoo

最新推荐文章于 2023-04-27 14:16:00 发布

阅读量1.4k

点赞数 1

分类专栏： # Html5 文章标签： html5 百度地图

本文链接：https://blog.csdn.net/lovoo/article/details/51434276

版权

Html5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<body>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript"
        src="https://api.map.baidu.com/api?v=2.0&ak=XyV6s136GhZs2fbl2gCpkKfG&s=1&services=true"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/CityList/1.2/src/CityList_min.js"></script>
<style>
html,body {
    margin: 0;
    padding: 0;
}

.poi_title {
    color: #CC5522;
    font-size: 14px;
    font-weight: bold;
    overflow: hidden;
    padding-right: 13px;
    white-space: nowrap
}

.poi_content {
    font: 12px arial, sans-serif;
    overflow: visible;
    padding-top: 4px;
    white-space: -moz-pre-wrap;
    word-wrap: break-word
}
</style>

<div style="width: 800px; height: 650px; border: #ccc solid 1px;"   id="dituContent"></div>


</body>
<script type="text/javascript">

    //创建和初始化地图函数：
    function initMap() {
        getLocation();//定位
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
        addMarker();//向地图中添加marker
    }

    var position_option = {
            enableHighAccuracy : true,
            maximumAge : 30000,
            timeout : 20000
        };
    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition,
                    showError, position_option);
        } else {
            alert("您的浏览器不支持地理定位"); 
        }
    }

    function showError(error) {
        alert("不能定位！" + error.message);
    }

    var lat;
    var lon;
    function showPosition(position) {
       /*  
        1. coords.latitude：估计纬度
    　　2. coords.longitude：估计经度
    　　3. coords.altitude：估计高度
    　　4. coords.accuracy：所提供的以米为单位的经度和纬度估计的精确度
    　　5. coords.altitudeAccuracy：所提供的以米为单位的高度估计的精确度
    　　6. coords.heading： 宿主设备当前移动的角度方向，相对于正北方向顺时针计算
    　　7. coords.speed：以米每秒为单位的设备的当前对地速度
       */
        lat = position.coords.latitude;
        lon = position.coords.longitude;
        var point = new BMap.Point(lon, lat); // 创建点坐标
        var gc = new BMap.Geocoder();
        gc.getLocation(point, function(rs) {
            var addComp = rs.addressComponents;
            alert(addComp.province + ", " + addComp.city + ", "
                    + addComp.district + ", " + addComp.street);
        });
    }

    //创建地图函数：
    function createMap() {
        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
        //var point = new BMap.Point(115.949652, 28.693851);//定义一个中心点坐标
        var point = new BMap.Point(lon, lat);//定义一个中心点坐标
        map.centerAndZoom(point, 18);//设定地图的中心点和坐标并将地图显示在地图容器中
        map.addControl(new BMap.NavigationControl()); 
        map.addControl(new BMap.ScaleControl()); 
        map.addControl(new BMap.OverviewMapControl()); 
        map.addControl(new BMap.MapTypeControl()); 
        var pointMarker = new BMap.Marker(point); 
        map.addOverlay(pointMarker); 
        window.map = map;//将map变量存储在全局
    }

    //地图事件设置函数：
    function setMapEvent() {
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
    }

    //地图控件添加函数：
    function addMapControl() {
        //向地图中添加缩放控件
        var ctrl_nav = new BMap.NavigationControl({
            anchor : BMAP_ANCHOR_TOP_LEFT,
            type : BMAP_NAVIGATION_CONTROL_LARGE
        });
        map.addControl(ctrl_nav);
        //向地图中添加缩略图控件
        var ctrl_ove = new BMap.OverviewMapControl({
            anchor : BMAP_ANCHOR_BOTTOM_RIGHT,
            isOpen : 1
        });
        map.addControl(ctrl_ove);
        //向地图中添加比例尺控件
        var ctrl_sca = new BMap.ScaleControl({
            anchor : BMAP_ANCHOR_BOTTOM_LEFT
        });
        map.addControl(ctrl_sca);
    }

    //标注点数组
    var markerArr = [ {
        title : "百恒网络",
        content : "电话：0791-88117053<br/>手机：15079002975",
        point : "115.950312|28.693447",
        isOpen : 1,
        icon : {
            w : 23,
            h : 25,
            l : 46,
            t : 21,
            x : 9,
            lb : 12
        }
    } ];
    //创建marker
    function addMarker() {
        for (var i = 0; i < markerArr.length; i++) {
            var json = markerArr[i];
            var p0 = json.point.split("|")[0];
            var p1 = json.point.split("|")[1];
            var point = new BMap.Point(p0, p1);
            var iconImg = createIcon(json.icon);
            var marker = new BMap.Marker(point, {
                icon : iconImg
            });
            var iw = createInfoWindow(i);
            var label = new BMap.Label(json.title, {
                "offset" : new BMap.Size(json.icon.lb - json.icon.x + 10, -20)
            });
            marker.setLabel(label);
            map.addOverlay(marker);
            label.setStyle({
                borderColor : "#808080",
                color : "#333",
                cursor : "pointer"
            });

            (function() {
                var index = i;
                var _iw = createInfoWindow(i);
                var _marker = marker;
                _marker.addEventListener("click", function() {
                    this.openInfoWindow(_iw);
                });
                _iw.addEventListener("open", function() {
                    _marker.getLabel().hide();
                })
                _iw.addEventListener("close", function() {
                    _marker.getLabel().show();
                })
                label.addEventListener("click", function() {
                    _marker.openInfoWindow(_iw);
                })
                if (!!json.isOpen) {
                    label.hide();
                    _marker.openInfoWindow(_iw);
                }
            })()
        }
    }
    //创建InfoWindow
    function createInfoWindow(i) {
        var json = markerArr[i];
        var iw = new BMap.InfoWindow(
                "<b class='poi_title' title='" + json.title + "'>"
                        + json.title + "</b><div class='poi_content'>"
                        + json.content + "</div>");
        return iw;
    }
    //创建一个Icon
    function createIcon(json) {
        var icon = new BMap.Icon("http://map.baidu.com/image/us_cursor.gif",
                new BMap.Size(json.w, json.h), {
                    imageOffset : new BMap.Size(-json.l, -json.t),
                    infoWindowOffset : new BMap.Size(json.lb + 5, 1),
                    offset : new BMap.Size(json.x, json.h)
                })
        return icon;
    }

    initMap();//创建和初始化地图
</script>
</html>

———————————————————————
有需求者请加qq:136137465，非诚勿扰
(java 架构师全套教程，共760G, 让你从零到架构师，每月轻松拿3万）
01.高级架构师四十二个阶段高
02.Java高级系统培训架构课程148课时
03.Java高级互联网架构师课程
04.Java互联网架构Netty、Nio、Mina等-视频教程
05.Java高级架构设计2016整理-视频教程
06.架构师基础、高级片
07.Java架构师必修linux运维系列课程
08.Java高级系统培训架构课程116课时
（送：hadoop系列教程，java设计模式与数据结构， Spring Cloud微服务， SpringBoot入门）
——————————————————————–

lovoo

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Html5 百度地图定位

<!DOCTYPE html ><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><body><script type="text/javascript" src="js/jquery-1.8.3.js"></script><script type="text/javascript
复制链接

扫一扫