百度地圖_路線規划，起點終點標記彈窗顯示信息

本文轉載自查看原文 2021-06-25 02:33 164 js/ 百度地圖/ js&jq

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 百度地圖三（獲取地圖路線規划）調用百度地圖進行路線規划安卓原生百度地圖（4）路線規划 Android學習筆記之使用百度地圖實現路線規划+公交信息檢索百度地圖路線規划得到路線上的各個點的坐標微信小程序 - 輸入起點、終點獲取距離並且進行路線規划（騰訊地圖）百度地圖之修改起點和終點的icon 百度地圖起點終點線路軌跡查詢 AndroidStudio下加入百度地圖的使用（四）——路線規划國內三大地圖（騰訊、高德、百度）路線規划功能的整合