4-百度地图

最新推荐文章于 2024-11-02 12:25:36 发布

金霖海

最新推荐文章于 2024-11-02 12:25:36 发布

阅读量404

点赞数

分类专栏：前端2 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_33396183/article/details/132069658

版权

前端2 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

4-百度地图

一百度地图

1 前期准备

H5端和PC端，对接百度提供JavaScript API。

移动端，对接百度android SDK或ios SDK

(1)打开百度地图开放平台

地址：https://lbsyun.baidu.com/

(2)选中开发文档——JavaScript Api

按照文档步骤开通百度开放平台并申请密钥

2 展示地图

<!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">
    <title>Document</title>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=TMKl9Sf7RG5ZTNEt4D8PFIdgsopyGqvZ">
    </script>
    <style type="text/css">
        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }

        #container {
            height: 100%
        }
    </style>
</head>

<body>
    <!-- 展示地图的HTML容器元素 -->
    <div id="container"></div> 

    <script>
        //创建地图实例
        var map = new BMapGL.Map("container");
        //设置中心点坐标
        var point = new BMapGL.Point(116.404, 39.915);
        //地图初始化
        map.centerAndZoom(point, 15); 
    </script>

</body>
</html>

3 开启鼠标滚轮缩放

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

4 添加控件

        //添加控件
        var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
        map.addControl(scaleCtrl);
        var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
        map.addControl(zoomCtrl);
        var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
        map.addControl(cityCtrl);

5 IP定位

        /**
         * 4ip定位
        */
        var myCity = new BMapGL.LocalCity();
        myCity.get(result =>{
            //获取城市名称
            let cityName = result.name
            console.log(cityName);
            //修改地图的中心点
            map.setCenter(cityName);
        })

6 地址解析

        //创建地址解析器实例(js对象)
        var myGeo = new BMapGL.Geocoder();
        // 将地址解析结果显示在地图上，并调整地图视野
        myGeo.getPoint("武汉市关山大道",function(point){
            console.log(point);
            map.centerAndZoom(point, 16);
            // 添加地图标准
            map.addOverlay(new BMapGL.Marker(point, {title: '武汉市关山大道'}))
        },"武汉市")

二影城地图开发

html

<!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">
    <title>Document</title>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=TMKl9Sf7RG5ZTNEt4D8PFIdgsopyGqvZ">
    </script>
    <style type="text/css">
        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }

        #container {
            height: 100%
        }
    </style>
</head>
<body>
    <!-- 展示地图的HTML容器元素 -->
    <div id="container"></div> 

    <script src="./js/map.js"></script>
</body>
</html>

let searchObj
let cityName
let map
function main(){
    //获取地址栏查询数据
    searchObj = getSearchData()
    showMap()
    //ip定位
    ipLocation()
    //地址解析
    addressAnalysis()
}
main()



/**
 * 展示地图
 */
function showMap(){
    //创建地图实例
    map = new BMapGL.Map("container");
    //设置中心点坐标
    var point = new BMapGL.Point(116.404, 39.915);
    //地图初始化
    map.centerAndZoom(point, 15); 

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

    //添加控件
    var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
    map.addControl(scaleCtrl);
    var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
    map.addControl(zoomCtrl);
    var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
    map.addControl(cityCtrl);
}

/**
 * 获取地址栏数据
 * @returns 
 */
function getSearchData(){
    let res = {}

    //获取地址栏数据
    let search = location.search.split("?")[1]
    console.log(search,"------");
    //把字符串转URLSearchParams
    let params = new URLSearchParams(search)
    for(let p of params){
        res[p[0]] = p[1]
    }
    console.log(res);
    return res
}

/**
 * ip定位,获取到城市名称
 */
function ipLocation(){
    var myCity = new BMapGL.LocalCity();
    myCity.get(result =>{
        //获取城市名称
        cityName = result.name
    })
}

/**
 * 地址解析
 */
function addressAnalysis(){
    setTimeout(function(){
        //创建地址解析器实例(js对象)
        var myGeo = new BMapGL.Geocoder();
        // 将地址解析结果显示在地图上，并调整地图视野
        myGeo.getPoint(searchObj.address,function(point){
            console.log(point);
            map.centerAndZoom(point, 16);
            // 添加地图标准
            map.addOverlay(new BMapGL.Marker(point, {title: searchObj.address}))
        },cityName)
    },1000)
}