前端項目中如何使用百度地圖api(含實例)

更新時間：2023年06月10日 10:33:28 作者：Me-Wow！

當(dāng)我們遇到定位展示的時候會出現(xiàn)使用地圖展示的需求,下面這篇文章主要給大家介紹了關(guān)于前端項目中如何使用百度地圖api(含實例)的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

項目中加入地圖是很常見的需求，今天以百度地圖為例，總結(jié)一下引入地圖的方法與實例

一、使用百度地圖接口的步驟

1.注冊百度地圖的開發(fā)者帳號??

百度地圖：https://lbsyun.baidu.com/

2.控制臺-應(yīng)用管理-我的應(yīng)用

創(chuàng)建相應(yīng)的項目，拿到自己的密鑰--訪問應(yīng)用（AK）

3.參考開發(fā)文檔進(jìn)行開發(fā)即可

百度地圖 Web開發(fā) JavaScript API ：https://lbsyun.baidu.com/index.php?title=jspopularGL

二、簡單例子

1.第一個地圖

代碼如下：替換上自己的密鑰

<!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="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密鑰">
    <title>我的第一個地圖</title>
    <style type="text/css">
        #container {
            height: 600px;
            width: 800px;
        }
    </style>
</head>
<body>
    <div id="container"></div>
</body>
<script>
    var map = new BMapGL.Map("container");// 創(chuàng)建地圖實例 
    var point = new BMapGL.Point(116.404, 39.915);// 創(chuàng)建點坐標(biāo) 
    map.centerAndZoom(point, 15);// 初始化地圖，設(shè)置中心點坐標(biāo)和地圖級別 
</script>
</html>

運行結(jié)果：

2.控件

可以給地圖添加比例尺控件、縮放空間、城市列表控件以及開啟滾輪縮放

    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);

3.靜態(tài)/動態(tài)添加點圈線面

點

    //靜態(tài)添加
    var point = new BMapGL.Point(116.404, 39.915);// 創(chuàng)建點坐標(biāo)
    var marker = new BMapGL.Marker(point); // 創(chuàng)建標(biāo)注   
    map.addOverlay(marker); // 將標(biāo)注添加到地圖中
    //動態(tài)添加
    map.addEventListener("click", e => {
        var p = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
        var m = new BMapGL.Marker(p);
        map.addOverlay(m);
    })

圈

BMapGL.Circle(圓心位置,半徑，圓的樣式)

    var circle = new BMapGL.Circle(point, 500, {
        strokeColor: "blue",
        strokeWeight: 2,
        strokeOpacity: 0.5
    });
    map.addOverlay(circle);

線

動態(tài)添加線是要借助雙擊事件，單擊選點，雙擊劃線。

BMapGL.Polyline(端點數(shù)組, 線的樣式); 第一個參數(shù)為線的端點組成的數(shù)字，第二個參數(shù)是線的樣式；第二個參數(shù)選填，不傳為默認(rèn)樣式。

    //靜態(tài)添加
    var polyline = new BMapGL.Polyline([
		    new BMapGL.Point(116.399, 39.910),
		    new BMapGL.Point(116.405, 39.920),
		    new BMapGL.Point(116.425, 39.900)
	    ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
    map.addOverlay(polyline);
    //動態(tài)添加
    var lineArr = [];
    map.addEventListener("click", e => {
        var p = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
        lineArr.push(p);
        var m = new BMapGL.Marker(p);
        map.addOverlay(m);
    })
    map.addEventListener("dblclick", () => {
        var polyline = new BMapGL.Polyline(lineArr, {
            strokeColor: "blue",
            strokeWeight: 2,
            strokeOpacity: 0.5
        });
        map.addOverlay(polyline);
        lineArr = [];
    })

面

BMapGL.Polygon(端點數(shù)組, 面的樣式); 同上線的方法。

若只想在畫面上留下線/面，不想要選點，則可以參考下方代碼中l(wèi)ast的相關(guān)操作，借助map.removeOverlay()方法移除選點。

    //靜態(tài)加面
    var polygon = new BMapGL.Polygon([
        new BMapGL.Point(116.387112, 39.920977),
        new BMapGL.Point(116.385243, 39.913063),
        new BMapGL.Point(116.394226, 39.917988),
        new BMapGL.Point(116.401772, 39.921364),
        new BMapGL.Point(116.41248, 39.927893)
    ], {
        strokeColor: "blue",
        strokeWeight: 2,
        strokeOpacity: 0.5
    });
    map.addOverlay(polygon);
    //動態(tài)加面
    var lineArr = [];
    var last = null;
    map.addEventListener("click", e => {
        last ? map.removeOverlay(last) : "";//移除當(dāng)前選的最后一個點
        var p = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
        lineArr.push(p);
        var m = new BMapGL.Marker(p);
        last = m;
        map.addOverlay(m);
    })
    map.addEventListener("dblclick", () => {
        map.removeOverlay(last);
        var polygon = new BMapGL.Polygon(lineArr, {
            strokeColor: "blue",
            strokeWeight: 2,
            strokeOpacity: 0.5,
            fillColor: "blue",
        })
        map.addOverlay(polygon);
        lineArr = [];
    })

4.文字標(biāo)注、信息窗口

文字標(biāo)注：可以寫html標(biāo)簽

    var content = "hello<b>world</b>";
    var label = new BMapGL.Label(content, { // 創(chuàng)建文本標(biāo)注
        position: point, // 設(shè)置標(biāo)注的地理位置
        offset: new BMapGL.Size(10, 20) // 設(shè)置標(biāo)注的偏移量
    })
    map.addOverlay(label); // 將標(biāo)注添加到地圖中

信息窗口

內(nèi)容同樣可以寫html標(biāo)簽，可以通過加事件來控制點擊選點時打開信息窗口

    var opts = {
        width: 250, // 信息窗口寬度
        height: 100, // 信息窗口高度
        title: "標(biāo)題" // 信息窗口標(biāo)題
    }
    var content = `<h1>hello</h1><p style="color:blue">你好</p>`;
    var infoWindow = new BMapGL.InfoWindow(content, opts); // 創(chuàng)建信息窗口對象
    //map.openInfoWindow(infoWindow, point); // 打開信息窗口
 
    //單擊打開
    marker.addEventListener("click", e => {
        map.openInfoWindow(infoWindow, point); // 打開信息窗口
    })

5. Web服務(wù)API-IP定位服務(wù)

需要導(dǎo)入jquery 借助jq跨域

url中的ip可不填，自動獲取

<body>
    <div class="address"></div>
</body>
<script>
    $(function () {
        $.ajax({
            url: "http://api.map.baidu.com/location/ip?ak=您的AK&ip=您的IP&coor=bd09ll",
            dataType: "jsonp",
            success: function (res) {
                console.log(res);
                $(".address").html(res.content.address)
            }
        })
    })
</script>

6.Web服務(wù)API-地點檢索服務(wù)

左上搜索框實現(xiàn)動態(tài)搜索

//導(dǎo)入地圖api
//導(dǎo)入jquery
//style
    <style type="text/css">
        #container {
            height: 600px;
            width: 800px;
        }
        .tip {
            position: absolute;
            top: 45px;
            z-index: 99999;
            background-color: rgba(0, 0, 0, .1);
        }
    </style>
<body>
    <input type="text" id="inp">
    <div class="tip"></div>
    <div id="container"></div>
</body>
<script>
    var map = new BMapGL.Map("container");
    var point = new BMapGL.Point(113.6648, 34.7835);
    map.centerAndZoom(point, 17);
    map.enableScrollWheelZoom(true); //滾輪縮放
    //添加點
    var marker = new BMapGL.Marker(point); // 創(chuàng)建標(biāo)注   
    map.addOverlay(marker); // 將標(biāo)注添加到地圖中
    var local = new BMapGL.LocalSearch(map, {
        renderOptions: {
            map: map
        }
    });
    local.search("景點");
    $(function () {
        $("#inp").on("input", function () {
            // console.log($("#inp").val());
            $.ajax({
                url: `https://api.map.baidu.com/place/v2/suggestion?query=${$("#inp").val()}&region=北京&city_limit=true&output=json&ak=您的ak`,
                dataType: "jsonp",
                success: function (res) {
                    console.log(res.result);
                    var str = "";
                    res.result.forEach(item => {
                        str += `<p class="item">${item.name}</p>`
                    });
                    $(".tip").html(str);
                }
            })
        })
        $(".tip").on("click", ".item", function () {
            local.search($(this).text());
            $(".tip").html("");
            $("#inp").val("");
            $("#inp").attr("placeholder", $(this).text());
        })
    })
</script>

三、vue項目中使用百度地圖接口的簡單方式

1.public下方的index.html中導(dǎo)入

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=您的密鑰">
</script>

2. .vue文件中

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div id="container" ref="dom"></div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const dom = ref();
let map;
onMounted(() => {
  map = new window.BMapGL.Map(dom.value);
  var point = new window.BMapGL.Point(116.404, 39.915);
  map.centerAndZoom(point, 15);
  map.enableScrollWheelZoom(true);
  map.setMapType(window.BMAP_EARTH_MAP);
})
</script>
<style>
#container {
  height: 600px;
  width: 800px;
}
</style>