博客园不常在线

有问题联系微信

微信号

微信公众号

前端系列：百度地图API（地图、坐标、标记、添加控件、2D图、混合图、智能搜索、地址解析器、信息窗口)

1.注册得到appkey

2.直接上代码

复制代码
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            font-family: "微软雅黑";
        }
        
        p {
            margin-left: 5px;
            font-size: 14px;
        }
        
        #container {
            height: 100%;
            width: 100%;
            overflow: hidden;
        }
        
        #point {
            display: none;
        }
        
        .search {
            margin-bottom: 10px;
            height: 30px;
            margin: 0 auto;
            width: 300px;
        }
        
        .center {
            height: 650px;
            width: 1200px;
            margin: 0 auto;
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xxxxxxxxxxxxxxxxxxxxxx"></script>
    <title>BaiduMap</title>
</head>

<body>
    <header class="search">
        <input type="search" name="txtSearch" id="txtSearch">
        <button id="btnSearch">搜索</button>
        <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
    </header>
    <div class="center">
        <span id="point"></span>
        <div id="container"></div>
    </div>
    <script type="text/javascript">
        var btnSearch = document.querySelector('#btnSearch');

        function initMap(point) {

            //默认天安门
            point = point || {
                lng: 116.403955,
                lat: 39.915112
            };
            //地图
            let map = new BMap.Map('container');

            //坐标
            let poi = new BMap.Point(point.lng, point.lat);

            //标记
            let marker = new BMap.Marker(poi);

            //带有定位的导航控件
            let navigationControl = new BMap.NavigationControl({
                // 靠左上角位置
                anchor: BMAP_ANCHOR_TOP_LEFT,
                // LARGE类型
                type: BMAP_NAVIGATION_CONTROL_LARGE,
                // 启用显示定位
                enableGeolocation: true
            });

            //定位控件
            let geolocationControl = new BMap.GeolocationControl();

            // 比例尺控件
            let scaleCtrl = new BMap.ScaleControl();

            //2D图，混合图
            let mapType = new BMap.MapTypeControl({
                mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],
                anchor: BMAP_ANCHOR_TOP_LEFT
            });
            //默认缩略地图控件
            let overView = new BMap.OverviewMapControl();

            //右下角，打开
            let overViewOpen = new BMap.OverviewMapControl({
                isOpen: true,
                anchor: BMAP_ANCHOR_BOTTOM_RIGHT
            });

            //右键菜单
            let menu = new BMap.ContextMenu();

            //建立一个自动完成的对象
            let ac = new BMap.Autocomplete({
                "input": "txtSearch",
                "location": map
            });

            //地址解析器
            let geoc = new BMap.Geocoder();

            //信息窗口
            let infoWindow = new BMap.InfoWindow();

            //let local = new BMap.LocalSearch(map);

            // 比例尺控件 BMapGL才支持
            // let zoomCtrl = new BMap.ZoomControl(); 

            // 3D控件 BMapGL才支持
            // var navi3DCtrl = new BMap.NavigationControl3D();

            // 初始化地图,设置中心点坐标和地图级别
            map.centerAndZoom(poi, 16);

            //开启鼠标滚轮缩放
            map.enableScrollWheelZoom(true);

            //添加标记
            map.addOverlay(marker);

            //添加带有定位的导航控件
            map.addControl(navigationControl);

            //添加定位控件
            map.addControl(geolocationControl);

            //添加比例尺控件
            map.addControl(scaleCtrl);

            //添加2D图，混合图
            map.addControl(mapType);

            //添加默认缩略地图控件
            map.addControl(overView);

            //添加右下角，打开
            map.addControl(overViewOpen);

            let txtMenuItem = [{
                text: '放大一级',
                callback: function() {
                    map.zoomIn();
                }
            }, {
                text: '缩小一级',
                callback: function() {
                    map.zoomOut();
                }
            }];

            for (const item of txtMenuItem) {
                menu.addItem(new BMap.MenuItem(item.text, item.callback, 100));
            }

            //添加右键菜单
            map.addContextMenu(menu);

            //添加比例尺控件 BMapGL才支持
            // map.addControl(zoomCtrl);

            //添加3D控件 BMapGL才支持
            // map.addControl(navi3DCtrl);

            //定位成功事件
            geolocationControl.addEventListener("locationSuccess", (e) => {
                setCenterAndMarker(map, marker, e.point);
            });

            //地图点击事件
            map.addEventListener('click', (e) => {
                setCenterAndMarker(map, marker, e.point);
            });

            //鼠标放在下拉列表上的事件
            ac.addEventListener("onhighlight", (e) => {

                const str = getHighLightContent(e);

                document.getElementById("searchResultPanel").innerHTML = str;
            });

            //搜索事件
            btnSearch.addEventListener('click', (e) => {

                var txtSearch = document.getElementById('txtSearch').value;

                function onSearchComplete() {

                    let pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果

                    setCenterAndMarker(map, marker, pp);
                }

                //智能搜索
                let local = new BMap.LocalSearch(map, {
                    onSearchComplete: onSearchComplete
                });

                try {
                    local.search(txtSearch);
                } catch (error) {

                }
            });

            //标注点击事件
            marker.addEventListener('click', (e) => {

                geoc.getLocation(e.point, function(res) {

                    var addComp = res.addressComponents;

                    const sContent = `<h4 style='margin:0 0 5px 0;'>${res.address}</h4>
                                    <p>城市:${addComp.city}</p>
                                    <p>市区:${addComp.district}</p>
                                    <p>街道:${addComp.street}</p>
                                    <p>街道号:${addComp.streetNumber}</p>
                                    <p>坐标:${Object.values(res.point).toString()}</p>`;

                    infoWindow.setContent(sContent);

                    marker.openInfoWindow(infoWindow);

                    infoWindow.redraw();
                });

            });
        }

        //获取文本内容
        function getHighLightContent(e) {

            let str = "";

            let _value = e.fromitem.value;

            let value = "";

            if (e.fromitem.index > -1) {
                value = _value.province + _value.city + _value.district + _value.street + _value.business;
            }

            str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

            value = "";

            if (e.toitem.index > -1) {

                _value = e.toitem.value;
                value = _value.province + _value.city + _value.district + _value.street + _value.business;
            }

            str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;

            return str;
        }

        //设置中心和标注
        function setCenterAndMarker(map, marker, pp) {

            map.setCenter(pp); //设置中心坐标

            map.clearOverlays(); //移除原有的标注

            marker.setPosition(pp); //设置坐标

            map.addOverlay(marker); //添加标注
        }

        initMap();
    </script>
</body>

</html>
复制代码

 

posted @   Code技术分享  阅读(957)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛