百度地图_路线规划，起点终点标记弹窗显示信息

2024-01-19 22:51:58

1.引入百度地图脚本

2.定义HTML容器

3.js脚本代码

<script>
        var map = new BMap.Map("container");

        var point = new BMap.Point(114.025973657, 22.5460535462);
        map.centerAndZoom(point, 15);

        map.enableScrollWheelZoom(true);

        // 弹窗
        var opts = {
            width: 270, // 信息窗口宽度
            height: 100, // 信息窗口高度
            enableMessage: true //设置允许信息窗发送短息
        };

        // 弹窗点击事件
        function openInfo(content, e) {
            var p = e.target;
            var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
            // 创建信息窗口对象
            var infoWindow = new BMap.InfoWindow(`<div>名称：<span>`+content.name+`</span></div><div>道路：<span>`+content.road+`</span></div><div>里程数：<span>`+content.milage+`</span></div>`, opts);
            //开启信息窗口
            map.openInfoWindow(infoWindow, point);
        }

        searchByStationName1()
        var from;
        var to;
        //定义方法
        function searchByStationName1() {
            var startAddrr = "深圳北站";
            var localSearch = new BMap.LocalSearch(map);
            localSearch.setSearchCompleteCallback(function (searchResult) {
                var poi = searchResult.getPoi(0); //获得起点经纬度坐标
                if (poi != null) {
                    //判断地名是否存在
                    from = poi.point;
                    searchByStationName2();
                } else {
                    alert("请输入正确的地名！");
                }
            });
            localSearch.search(startAddrr);
        }


        function searchByStationName2() {
            var endAddrr = "东部华侨城";
            var localSearch = new BMap.LocalSearch(map);
            localSearch.setSearchCompleteCallback(function (searchResult) {
                var poi = searchResult.getPoi(0); //获得目的地经纬度坐标
                if (poi != null) {
                    //判断目的地是否存在
                    to = poi.point;
                    run();
                } else {
                    alert("请输入正确的地名！");
                }
            });
            localSearch.search(endAddrr);
        }

        function run() {
            // map.clearOverlays(); // 清除地图上所有的覆盖物
            var walking = new BMap.WalkingRoute(map); // 创建步行实例
            walking.search(this.from, this.to); // 第一个步行搜索
            walking.setSearchCompleteCallback(function () {
                console.log("completeCallback start!");
                var pts = walking
                    .getResults()
                    .getPlan(0)
                    .getRoute(0)
                    .getPath(); // 通过步行实例，获得一系列点的数组

                var polyline = new BMap.Polyline(pts);
                map.addOverlay(polyline);
                console.log("pollyline!", polyline);
                var m1 = new BMap.Marker(from); // 创建2个marker
                var m2 = new BMap.Marker(to);
                map.addOverlay(m1);
                map.addOverlay(m2);

                m1.addEventListener("click", function (e) {
                    openInfo({name: "深圳北",milage: "55km",road: "深圳北-东部华侨城"}, e)
                });
                m2.addEventListener("click", function (e) {
                    openInfo({name: "深圳北",milage: "55km",road: "深圳北-东部华侨城"}, e)
                });
                var lab1 = new BMap.Label("起点", {
                    position: from
                }); // 创建2个label
                var lab2 = new BMap.Label("终点", {
                    position: to
                });
                map.addOverlay(lab1);
                map.addOverlay(lab2);
                console.log("setTimeout!");
                setTimeout(function () {
                    map.setViewport([from, to]); // 调整到最佳视野
                }, 1000);
            });
        }
    </script>

全部代码

<!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 type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=53oVIOgmSIejwV7EfphPgTynOZbIiVYu">
    </script>
    <title>Document</title>
</head>

<body>
    <style>
        #container {
            width: 100%;
            height: 500px;
        }
    </style>
    <div id="container"></div>
    <div id="info"></div>
    <script>
        var map = new BMap.Map("container");

        var point = new BMap.Point(114.025973657, 22.5460535462);
        map.centerAndZoom(point, 15);

        map.enableScrollWheelZoom(true);

        // 弹窗
        var opts = {
            width: 270, // 信息窗口宽度
            height: 100, // 信息窗口高度
            enableMessage: true //设置允许信息窗发送短息
        };

        // 弹窗点击事件
        function openInfo(content, e) {
            var p = e.target;
            var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
            // 创建信息窗口对象
            var infoWindow = new BMap.InfoWindow(`<div>名称：<span>`+content.name+`</span></div><div>道路：<span>`+content.road+`</span></div><div>里程数：<span>`+content.milage+`</span></div>`, opts);
            //开启信息窗口
            map.openInfoWindow(infoWindow, point);
        }

        searchByStationName1()
        var from;
        var to;
        //定义方法
        function searchByStationName1() {
            var startAddrr = "深圳北站";
            var localSearch = new BMap.LocalSearch(map);
            localSearch.setSearchCompleteCallback(function (searchResult) {
                var poi = searchResult.getPoi(0); //获得起点经纬度坐标
                if (poi != null) {
                    //判断地名是否存在
                    from = poi.point;
                    searchByStationName2();
                } else {
                    alert("请输入正确的地名！");
                }
            });
            localSearch.search(startAddrr);
        }


        function searchByStationName2() {
            var endAddrr = "东部华侨城";
            var localSearch = new BMap.LocalSearch(map);
            localSearch.setSearchCompleteCallback(function (searchResult) {
                var poi = searchResult.getPoi(0); //获得目的地经纬度坐标
                if (poi != null) {
                    //判断目的地是否存在
                    to = poi.point;
                    run();
                } else {
                    alert("请输入正确的地名！");
                }
            });
            localSearch.search(endAddrr);
        }

        function run() {
            // map.clearOverlays(); // 清除地图上所有的覆盖物
            var walking = new BMap.WalkingRoute(map); // 创建步行实例
            walking.search(this.from, this.to); // 第一个步行搜索
            walking.setSearchCompleteCallback(function () {
                console.log("completeCallback start!");
                var pts = walking
                    .getResults()
                    .getPlan(0)
                    .getRoute(0)
                    .getPath(); // 通过步行实例，获得一系列点的数组

                var polyline = new BMap.Polyline(pts);
                map.addOverlay(polyline);
                console.log("pollyline!", polyline);
                var m1 = new BMap.Marker(from); // 创建2个marker
                var m2 = new BMap.Marker(to);
                map.addOverlay(m1);
                map.addOverlay(m2);

                m1.addEventListener("click", function (e) {
                    openInfo({name: "深圳北",milage: "55km",road: "深圳北-东部华侨城"}, e)
                });
                m2.addEventListener("click", function (e) {
                    openInfo({name: "深圳北",milage: "55km",road: "深圳北-东部华侨城"}, e)
                });
                var lab1 = new BMap.Label("起点", {
                    position: from
                }); // 创建2个label
                var lab2 = new BMap.Label("终点", {
                    position: to
                });
                map.addOverlay(lab1);
                map.addOverlay(lab2);
                console.log("setTimeout!");
                setTimeout(function () {
                    map.setViewport([from, to]); // 调整到最佳视野
                }, 1000);
            });
        }
    </script>
</body>

</html>

View Code

百度地图_路线规划，起点终点标记弹窗显示信息

码农公寓

相关文章