日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

公告:魔扣目錄網為廣大站長提供免費收錄網站服務,提交前請做好本站友鏈:【 網站目錄:http://www.ylptlb.cn 】, 免友鏈快審服務(50元/站),

點擊這里在線咨詢客服
新站提交
  • 網站:51998
  • 待審:31
  • 小程序:12
  • 文章:1030137
  • 會員:747

網站做好后,給網站調用地圖坐標動態顯示公司位置,方便客戶在地圖上查找你公司位置到公司洽談業務。設置方法如下,詳細教程請看賬號里的對應視頻

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>

在代碼里,設置地圖文件的絕對路徑,調整顯示的寬度和高度。

通過上面的設置,網站就可以調用百度地圖坐標系統了,你也趕緊試試吧,很好玩的^_^

分享到:
標簽:地圖
用戶無頭像

網友整理

注冊時間:

網站:5 個   小程序:0 個  文章:12 篇

  • 51998

    網站

  • 12

    小程序

  • 1030137

    文章

  • 747

    會員

趕快注冊賬號,推廣您的網站吧!
最新入駐小程序

數獨大挑戰2018-06-03

數獨一種數學游戲,玩家需要根據9

答題星2018-06-03

您可以通過答題星輕松地創建試卷

全階人生考試2018-06-03

各種考試題,題庫,初中,高中,大學四六

運動步數有氧達人2018-06-03

記錄運動步數,積累氧氣值。還可偷

每日養生app2018-06-03

每日養生,天天健康

體育訓練成績評定2018-06-03

通用課目體育訓練成績評定