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