百度地图javascript 使用

最新推荐文章于 2024-04-01 16:00:15 发布

weixin_43632791

最新推荐文章于 2024-04-01 16:00:15 发布

阅读量384

点赞数

分类专栏： html js 文章标签： javascript 百度开发语言

本文链接：https://blog.csdn.net/weixin_43632791/article/details/127392708

版权

html 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

百度地图js使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./static/jquery.min.js"></script>
    <title>带检索功能的信息窗口</title>
</head>

<body>

    <div style="width:100%;height:100vh;" id="container" class="map_sy"></div>

</body>

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你的密钥"></script>
<script type="text/javascript" src="https://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="https://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
<script>
    //搜索的关键词
    var keyword = '天安门';
    // 百度地图API功能
    var map = new BMap.Map("container");

    map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
    map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
    var local = new BMap.LocalSearch(map, {
        //    renderOptions: { map: map }
    });
    console.log(keyword)
    local.search(keyword)
        //搜索回掉
    local.setSearchCompleteCallback(function(searchResult) {
        console.log(searchResult)
        if (local.getStatus() == BMAP_STATUS_SUCCESS) {
            var poi = searchResult.getPoi(0);
            console.log(poi)
            if (poi) {
                lng = poi.point.lng;
                lat = poi.point.lat;
                var point = new BMap.Point(lng, lat);
                map.centerAndZoom(point, 11);
                //自定义信息窗口
                console.log(poi)
                if (poi.phoneNumber) {
                    phoneNumber = poi.phoneNumber
                } else {
                    phoneNumber = ''
                }
                var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
                    '地址：' + poi.address + '<br/>电话：' + phoneNumber + '<br/>' +
                    '</div>';
                setInfo(content, point)


            }
        } else {
            alert("输入的地址错误！");
        }
    });

    function setInfo(content, poi) {
        //创建检索信息窗口对象
        var searchInfoWindow = null;
        searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
            title: keyword, //标题
            width: 290, //宽度
            height: 55, //高度
            panel: "panel", //检索结果面板
            enableAutoPan: true, //自动平移
            searchTypes: [
                BMAPLIB_TAB_SEARCH, //周边检索
                BMAPLIB_TAB_TO_HERE, //到这里去
                BMAPLIB_TAB_FROM_HERE //从这里出发
            ]
        });
        var marker = new BMap.Marker(poi); //创建marker对象
        marker.enableDragging(); //marker可拖拽
        searchInfoWindow.open(marker);
        // 点击弹信息窗
        //    marker.addEventListener("click", function(e) {

        //    })
        map.addOverlay(marker); //在地图中添加marker
    }
</script>

</html>