前端項目中如何使用百度地圖api(含實例)
更新時間：2023年06月10日 10:33:28 作者：Me-Wow！
當我們遇到定位展示的時候會出現(xiàn)使用地圖展示的需求,下面這篇文章主要給大家介紹了關于前端項目中如何使用百度地圖api(含實例)的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
前言
項目中加入地圖是很常見的需求，今天以百度地圖為例，總結一下引入地圖的方法與實例
一、使用百度地圖接口的步驟
1.注冊百度地圖的開發(fā)者帳號??
百度地圖：https://lbsyun.baidu.com/
2.控制臺-應用管理-我的應用
創(chuàng)建相應的項目，拿到自己的密鑰--訪問應用（AK）
3.參考開發(fā)文檔進行開發(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)建點坐標
map.centerAndZoom(point, 15);// 初始化地圖，設置中心點坐標和地圖級別
</script>
</html>運行結果：
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)建點坐標
var marker = new BMapGL.Marker(point); // 創(chuàng)建標注
map.addOverlay(marker); // 將標注添加到地圖中
//動態(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ù)選填，不傳為默認樣式。
//靜態(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的相關操作，借助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) : "";//移除當前選的最后一個點
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.文字標注、信息窗口
文字標注：可以寫html標簽
var content = "hello<b>world</b>";
var label = new BMapGL.Label(content, { // 創(chuàng)建文本標注
position: point, // 設置標注的地理位置
offset: new BMapGL.Size(10, 20) // 設置標注的偏移量
})
map.addOverlay(label); // 將標注添加到地圖中信息窗口
內容同樣可以寫html標簽，可以通過加事件來控制點擊選點時打開信息窗口
var opts = {
width: 250, // 信息窗口寬度
height: 100, // 信息窗口高度
title: "標題" // 信息窗口標題
}
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服務API-IP定位服務
需要導入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服務API-地點檢索服務
左上搜索框 實現(xiàn)動態(tài)搜索
//導入地圖api
//導入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)建標注
map.addOverlay(marker); // 將標注添加到地圖中
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()}®ion=北京&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中導入
<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>總結
到此這篇關于前端項目中如何使用百度地圖api的文章就介紹到這了,更多相關前端使用百度地圖api內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關文章
在我們的項目中需要用到django實現(xiàn)跨域的問題，本文通過示例代碼給大家詳細介紹django+vue實現(xiàn)跨域的方法，感興趣的朋友跟隨小編一起看看吧2022-03-03
在VUE中使用lodash的debounce和throttle操作
這篇文章主要介紹了在VUE中使用lodash的debounce和throttle操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
在vue項目中我們經常遇到圖標,下面這篇文章主要給大家介紹了關于如何基于Vue實現(xiàn)自定義組件的方式引入圖標的相關資料,文章通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了Vue中結合clipboard實現(xiàn)復制功能 ,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09
中秋節(jié)快要到啦,我們一起用Vue創(chuàng)建一個簡單的連連看游戲,連連看大家一定都玩過吧,通過消除相同的圖案來清理棋盤,小編將一步步引導大家完成整個游戲的制作過程,讓我們開始吧,一起為中秋節(jié)增添一些互動和娛樂2023-09-09
這篇文章主要介紹了vue多頁面開發(fā)和打包的正確處理方法，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了Vue.js 中制作自定義選擇組件的代碼附演示demo,通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2020-02-02
這篇文章主要介紹了vue輸入框使用模糊搜索功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
這篇文章主要給大家介紹了關于vue子組件獲取到它父組件數(shù)據的4種方法,對于vue來說組件之間的消息傳遞是非常重要的,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-08-08
本文主要介紹在vue項目中,遇到數(shù)據更新但視圖不更新的情況時,無法使用watch監(jiān)聽、無法使用this.$set方法,同時使用this.$forceUpdate()無效時,所使用的解決方案,需要的朋友可以參考下2024-02-02