網(wǎng)站做好后，給網(wǎng)站調(diào)用地圖坐標(biāo)動態(tài)顯示公司位置，方便客戶在地圖上查找你公司位置到公司洽談業(yè)務(wù)。設(shè)置方法如下，詳細(xì)教程請看賬號里的對應(yīng)視頻
1、獲取百度地圖秘鑰（AK）
百度地圖開放平臺網(wǎng)址是
https://lbsyun.bAIdu.com/
注冊賬號，點擊“開發(fā)文檔”--“JAVAScript API”--申請“個人開發(fā)者”，根據(jù)提示提交資料，注冊賬號。
在后臺“應(yīng)用管理”--“我的應(yīng)用”--創(chuàng)建應(yīng)用。在頁面中的“應(yīng)用類型”選擇“瀏覽器端”，添加允許調(diào)用的網(wǎng)站域名，提交審核，獲得密鑰（AK）。
2、獲取地址的經(jīng)度和維度坐標(biāo)
地圖拾取坐標(biāo)系統(tǒng)網(wǎng)址
http://api.map.baidu.com/lbsapi/getpoint/index.html
定位到公司具體地址，會自動出現(xiàn)該位置的經(jīng)度和維度數(shù)值，保存該數(shù)值。
3、制作地圖坐標(biāo)頁面
這里提供優(yōu)化后的地圖坐標(biāo)顯示效果代碼，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 適應(yīng)移動端頁面展示 -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>網(wǎng)站調(diào)用地圖坐標(biāo)</title>
<script type="text/JavaScript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您申請到的秘鑰AK"></script>
<style type="text/css">
/* 設(shè)置容器樣式 */
#dituContent {
height: 500px;
width: 100%;
}
.mapContent {
width: 240px;
height: 100px;
position: relative;
top: -30px;
}
.BMap_bubble_content {
overflow: visible !important;
}
.mapContent .title {
width: 100%;
font-size: 18px;
color: #333;
font-weight: 600;
}
.mapContent .main {}
.mapContent .main p {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<!-- 地圖容器 -->
<div id="dituContent"> </div>
<script type="text/javascript">
var longitude = '117.307712'; //經(jīng)度
var latitude = '31.869903'; //緯度
// 創(chuàng)建圖文信息窗口
var sContent = `
<div class="mapContent">
<div class="title">
孫健工作室
</div>
<div class="main">
<p>聯(lián)系人:姓名</p>
<p>聯(lián)系方式:XXXXXX</p>
<p>詳細(xì)地址:公司所在地詳細(xì)地址</p>
</div>
</div>`;
// 創(chuàng)建地圖實例
var map = new BMapGL.Map("dituContent");
// 設(shè)置中心點坐標(biāo)
var point = new BMapGL.Point(longitude, latitude);
// 地圖初始化，同時設(shè)置地圖展示級別
map.centerAndZoom(point, 18);
//開啟鼠標(biāo)滾輪縮放
map.enableScrollWheelZoom(true);
// 創(chuàng)建添加點標(biāo)記
var marker = new BMapGL.Marker(point);
map.addOverlay(marker);
// 創(chuàng)建信息窗口對象
var infoWindow = new BMapGL.InfoWindow(sContent);
// 打開信息窗口
map.openInfoWindow(infoWindow, map.getCenter());
// marker添加點擊事件
marker.addEventListener('click', function() {
this.openInfoWindow(infoWindow);
// 圖片加載完畢重繪infoWindow
document.getElementById('imgDemo').onload = function() {
infoWindow.redraw(); //
};
})
</script>
</body>
</html>
把上面的代碼復(fù)制下來，在自己電腦里，新建TXT文檔，把該代碼粘貼進(jìn)去，修改代碼里的“秘鑰AK”、“經(jīng)度”、“維度”為你的。
然后，名字可以命名為ditumap，把該文件的后綴txt，修改為html，名字全稱就是ditumap.html，TXT文檔就自動轉(zhuǎn)換為網(wǎng)頁文件了。
4、調(diào)用制作好的地圖坐標(biāo)網(wǎng)頁
使用FTP軟件，把文件上傳到網(wǎng)站空間合適位置，并記住該路徑。
進(jìn)入網(wǎng)站管理后臺，打開需要某個需要調(diào)用地圖頁面的文章，使用下面的iframe標(biāo)簽代碼，遠(yuǎn)程調(diào)用地圖文件。
<iframe style="border:none;" src="地圖文件的絕對路徑" width="100%" height="450px" frameborder="0" scrolling="no"></iframe>
在代碼里，設(shè)置地圖文件的絕對路徑，調(diào)整顯示的寬度和高度。
通過上面的設(shè)置，網(wǎng)站就可以調(diào)用百度地圖坐標(biāo)系統(tǒng)了，你也趕緊試試吧，很好玩的^_^
