js展示百度地圖及添加標(biāo)注實(shí)現(xiàn)
更新時(shí)間：2023年08月18日 09:48:39 作者：蘭亭
這篇文章主要為大家介紹了js展示百度地圖及添加標(biāo)注實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
百度地圖開(kāi)放平臺(tái)
新建應(yīng)用
js開(kāi)發(fā)文檔
https://lbsyun.baidu.com/index.php?title=jspopularGL
demo
我們暫時(shí)用的就是展示地圖和標(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實(shí)例
var point = new BMapGL.Point(116.404, 39.915);
map.centerAndZoom(point, 15); // 初始化地圖,設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別
var marker = new BMapGL.Marker(point); // 創(chuàng)建標(biāo)注
map.addOverlay(marker);
map.enableScrollWheelZoom(true); // 開(kāi)啟鼠標(biāo)滾輪縮放
</script>以上就是js展示百度地圖及添加標(biāo)注實(shí)現(xiàn)的詳細(xì)內(nèi)容，更多關(guān)于js百度地圖添加標(biāo)注的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
微信小程序 wx.request(object) API詳解及實(shí)例代碼
這篇文章主要介紹了微信小程序 wx.request(object) API詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-09-09
微信小程序 （七）數(shù)據(jù)綁定詳細(xì)介紹
這篇文章主要介紹了微信小程序數(shù)據(jù)綁定詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-09-09
這篇文章主要為大家介紹了微前端之?js隔離?樣式隔離?元素隔離問(wèn)題詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
Web應(yīng)用開(kāi)發(fā)TypeScript使用詳解
這篇文章主要為大家介紹了Web應(yīng)用開(kāi)發(fā)TypeScript的使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-05-05
這篇文章主要介紹了微信小程序 下拉菜單的實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了javascript對(duì)象3個(gè)屬性特征，writable可寫(xiě)、enumerable可枚舉、configurable可配置，下面來(lái)看看文章的詳細(xì)內(nèi)容吧2021-11-11
今天小編就為大家分享一篇關(guān)于使用JavaScript破解web的文章，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2018-09-09
這篇文章主要為大家介紹了Fabric.js 修改畫(huà)布交互方式作用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
JavaScript嚴(yán)格模式不支持八進(jìn)制的問(wèn)題講解
這篇文章主要講解JavaScript嚴(yán)格模式不支持八進(jìn)制的問(wèn)題，本文圍繞JavaScript嚴(yán)格模式展開(kāi)內(nèi)容，詳細(xì)介紹為什么JavaScript嚴(yán)格模式不支持八進(jìn)制，下面來(lái)看看詳細(xì)介紹,需要的朋友可以參考一下2021-11-11
這篇文章主要介紹了TypeScript 枚舉類型，TypeScript 在 ES 原有類型基礎(chǔ)上加入枚舉類型，使得在 TypeScript 中也可以給一組數(shù)值賦予名字，這樣對(duì)開(kāi)發(fā)者比較友好，可以理解枚舉就是一個(gè)字典，文章內(nèi)容圍繞TypeScript 枚舉類型展開(kāi)內(nèi)容,需要的朋友可以參考一下2021-10-10