js展示百度地圖及添加標(biāo)注實現(xiàn)
更新時間：2023年08月18日 09:48:39 作者：蘭亭
這篇文章主要為大家介紹了js展示百度地圖及添加標(biāo)注實現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
百度地圖開放平臺
新建應(yīng)用
js開發(fā)文檔
https://lbsyun.baidu.com/index.php?title=jspopularGL
demo
我們暫時用的就是展示地圖和標(biāo)注：源碼如下（ak換一下）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>地圖展示</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<style>
body,
html,
#container {
overflow: hidden;
width: 70%;
height: 70%;
margin: 0;
font-family: "微軟雅黑";
}
.info {
z-index: 999;
width: auto;
min-width: 22rem;
padding: .75rem 1.25rem;
margin-left: 1.25rem;
position: fixed;
top: 1rem;
background-color: #fff;
border-radius: .25rem;
font-size: 14px;
color: #666;
box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
}
</style>
<script src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=yourApplicationKey"></script>
</head>
<body>
<div class="info">最新版GL地圖命名空間為BMapGL, 可按住鼠標(biāo)右鍵控制地圖旋轉(zhuǎn)、修改傾斜角度。</div>
<div id="container"></div>
</body>
</html>
<script>
var map = new BMapGL.Map('container'); // 創(chuàng)建Map實例
var point = new BMapGL.Point(116.404, 39.915);
map.centerAndZoom(point, 15); // 初始化地圖,設(shè)置中心點坐標(biāo)和地圖級別
var marker = new BMapGL.Marker(point); // 創(chuàng)建標(biāo)注
map.addOverlay(marker);
map.enableScrollWheelZoom(true); // 開啟鼠標(biāo)滾輪縮放
</script>以上就是js展示百度地圖及添加標(biāo)注實現(xiàn)的詳細(xì)內(nèi)容，更多關(guān)于js百度地圖添加標(biāo)注的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
JavaScript?執(zhí)行上下文的視角詳解this使用
這篇文章主要為以JavaScript?執(zhí)行上下文的視角為大家講清楚?this使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
如何取得中文輸入的真實長度？...2006-06-06
這篇文章主要給大家分享的是TypeScript 索引簽名的理解，索引簽名由方括號中的索引名稱及其類型組成，后面是冒號和值類型：{ [indexName: KeyType]: ValueType }， KeyType 可以是一個 string、number 或 symbol，而ValueType 可以是任何類型，下面就倆簡單了解一下吧2021-10-10
這篇文章主要給大家分享js不常見操作運算符總結(jié)，下面文章收i部分js操作運算符得介紹,需要的朋友可以參考一下，希望對你有幫助2021-11-11
這篇文章主要為大家介紹了javascript字符串單個字符訪問方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
JavaScript與JQuery框架基礎(chǔ)入門教程
這篇文章主要介紹了jQuery和JavaScript入門基礎(chǔ)知識學(xué)習(xí)指南,jQuery是當(dāng)下最主流人氣最高的JavaScript庫,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了微信小程序 Page（）函數(shù)詳解的相關(guān)資料,在開發(fā)過程中肯定會遇到Page（）函數(shù)，希望能幫助到大家，需要的朋友可以參考下2016-10-10
這篇文章主要為大家介紹了TypeScript中extends的正確打開方式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要為大家介紹了Typescript?封裝?Axios攔截器方法實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
JavaScript前端學(xué)算法題解LeetCode最大重復(fù)子字符串
這篇文章主要為大家介紹了JavaScript前端學(xué)算法題解LeetCode最大重復(fù)子字符串，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09