Web各大地圖開發

2021-9-17 前端達人

Web各大地圖開發

介紹

想必大家對地圖都不陌生,都使用過地圖吧,有了地圖我們也就不用在把回家的路徑牢牢地記住了,只需要在地圖上搜索下就能進行導航了,

而且在打車的時候也都使用的是地圖,…地圖作用范圍很廣很廣這里就不在多介紹了直接進入主題.

目前市面上主流的地圖有:

高德地圖

https://lbs.amap.com/ 開發者平臺
百度地圖

https://lbsyun.baidu.com/ 開發者平臺
騰訊地圖

https://lbs.qq.com/ 開發者平臺
天地圖

https://www.tianditu.gov.cn/ 開發者平臺

以上就是我們常用的地圖,也是可以免費調用的地圖不收費,但是有次數限制都夠用,基本所有的地圖開發都要先申請為開發者后才能進行地圖的開發

雖然高德很火很厲害,但是我公司讓我用天地圖開發,所以下面的案例大致演示天地圖的開發的流程,其他平臺的地圖開發流程基本都類似.

只要掌握一個地圖的開發那么其他地圖開發就是小兒科了…

開發地圖需要的準備

進入天地圖頁面
注冊賬號
申請成為開發者

開發者分為: 個人開發者和企業開發者根據情況自行選擇
然后根據需求創建應用-生成應用key

入門Dome

實例代碼:

http://lbs.tianditu.gov.cn/api/js4.0/guide.html 以下代碼的內容介紹

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>HELLO WORLD</title> <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=9e70e9aa0be51fe8ad220e1c4b5d5aa5"></script> <script> var map; var zoom = 12; function onLoad() { map = new T.Map('mapDiv'); map.centerAndZoom(new T.LngLat(116.40769, 39.89945), zoom); //39.897019,116.323003 } </script> </head> <body onLoad="onLoad()"> <div id="mapDiv" style="position:absolute;width:100%; height:900px"></div> </body> </html> 
        

            
                1
            

            
                2
            

            
                3
            

            
                4
            

            
                5
            

            
                6
            

            
                7
            

            
                8
            

            
                9
            

            
                10
            

            
                11
            

            
                12
            

            
                13
            

            
                14
            

            
                15
            

            
                16
            

            
                17
            

            
                18
            

            
                19
            

            
                20

地圖級別也就是地圖加載后顯示的縮放級別

縮放級別1~2 那么就是洲級別 (亞洲 ,美洲…)

縮放級別3~4 那么就是國家級別

縮放級別5~6 那么就是省級別

縮放級別7~8 那么就是市級別

縮放級別9~10 那么就是區級別

縮放級別11~12 那么就是縣級別

…以此類推最多縮放18級別(街道級別)

上案例效果圖:

各種需求進行開發

頁面

http://lbs.tianditu.gov.cn/api/js4.0/examples.html 基本日常所需的實例,稍微改動就能使用了

上面實例無法滿足你的要求或者需要添加特殊操作,那么能在下面AOI文檔中能找到具體實例代碼里的每一個方法使用詳細,然后在根據業務需求進行修改就行了

http://lbs.tianditu.gov.cn/api/js4.0/class.html

接口服務

在天地圖中提供了幾個服務接口用來獲取一些數據的地方 ,但是注意有每日調用配額限制的(控制臺可以查看次數限制)

http://lbs.tianditu.gov.cn/server/search.html

比如:客戶想查詢或者快速定位某一個區域或者街道的位置,但是自己通過地圖一點一點的找太麻煩了那么就可以通過接口的方式直接獲取到想要的數據,

查詢: 北京市延慶區延慶鎮蓮花池村前街50夕陽紅養老院的坐標

http://api.tianditu.gov.cn/geocoder?ds={"keyWord":"北京市延慶區延慶鎮蓮花池村前街50夕陽紅養老院"}&tk=9e70e9aa0be51fe8ad220e1c4b5d5aa5

接口返回的數據:

{“msg”:“ok”,“location”:{“score”:40,“level”:“地名地址”,“lon”:116.002677524,“lat”:40.4509903540001,“keyWord”:“北京市延慶區延慶鎮蓮花池村前街50夕陽紅養老院”},“searchVersion”:“6.0.0”,“status”:“0”}

響應接口

參數值	參數說明	參數類型	備注（值域）
status	返回狀態	string	0：正常返回，101：結果為空，404：出錯。
msg	返回信息	string	OK：正常，其他異常。
location	地址信息	json	地址信息

location

參數值	參數說明	參數類型	備注（值域）
lon	坐標點顯示經度	Double	必須返回。
lat	坐標點顯示緯度	Double	必須返回。
level	類別名稱	string	非必須返回。
typeRound	附近相似點	Array	開啟周邊查詢必需返回。

然后在代碼里通過

 map.centerAndZoom(new T.LngLat(116.41593, 39.92313), 16); 


    
        1

從新設置下地圖顯示的位置,以及縮放比例就行了.

標注案例

在很多項目都要求把客戶提供的公司…在地圖上標注出來并且顯示對應的描述,

在天地圖提供的實例中是默認鼠標點擊顯示,然后點擊消失,實際中這樣太麻煩了我們稍作修改,改變為鼠標懸浮顯示,鼠標離開消失

修改后的代碼

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>天地圖－地圖API－范例－多個點的信息窗口</title> <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=9e70e9aa0be51fe8ad220e1c4b5d5aa5"></script> <style type="text/css"> body, html{width: 100%;height: 100%;margin:0;font-family:"微軟雅黑";} #mapDiv{height:900px;width:100%;} input,p { margin-top: 10px; margin-left: 5px; font-size: 14px; } </style> <script> var map var zoom = 15; function onLoad() { var data_info = [[116.417854,39.921988,"地址：北京市東城區王府井大街88號樂天銀泰百貨八層"], [116.406605,39.921585,"地址：北京市東城區東華門大街"], [116.412222,39.912345,"地址：北京市東城區正義路甲5號"] ]; //初始化地圖對象 map = new T.Map("mapDiv"); //設置顯示地圖的中心點和級別 map.centerAndZoom(new T.LngLat(116.41593, 39.92313), zoom); for(var i=0;i<data_info.length;i++){ var marker = new T.Marker(new T.LngLat(data_info[i][0],data_info[i][1])); // 創建標注 var content = data_info[i][2]; map.addOverLay(marker); // 將標注添加到地圖中 addClickHandler(content,marker); } function addClickHandler(content,marker){ // 改為鼠標懸浮顯示 marker.addEventListener("mouseover",function(e){ openInfo(content,e)} ); //添加鼠標離開后關閉提示框 marker.addEventListener("mouseout",function(e){ map.closeInfoWindow() } ); } function openInfo(content,e){ var point = e.lnglat; marker = new T.Marker(point);// 創建標注 var markerInfoWin = new T.InfoWindow(content,{offset:new T.Point(0,-30)}); // 創建信息窗口對象 map.openInfoWindow(markerInfoWin,point); //開啟信息窗口 } } </script> </head> <body onLoad="onLoad()"> <div id="mapDiv"></div> <p>為多個點添加多個點的信息窗口</p> </body> </html> 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20
    

    
        21
    

    
        22
    

    
        23
    

    
        24
    

    
        25
    

    
        26
    

    
        27
    

    
        28
    

    
        29
    

    
        30
    

    
        31
    

    
        32
    

    
        33
    

    
        34
    

    
        35
    

    
        36
    

    
        37
    

    
        38
    

    
        39
    

    
        40
    

    
        41
    

    
        42
    

    
        43
    

    
        44
    

    
        45
    

    
        46
    

    
        47
    

    
        48
    

    
        49
    

    
        50
    

    
        51
    

    
        52
    

    
        53
    

    
        54
    

    
        55
    

    
        56
    

    
        57
    

    
        58

如果客戶不知道自己公司…的坐標,我們可以通過-客戶給的名稱,進行自動搜索地理位置然后進行標注實現

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta name="keywords" content="天地圖"/> <title>天地圖－地圖API－范例－地理編碼</title> <style type="text/css">body,html{width:100%;height:100%;margin:0;font-family:"Microsoft YaHei"}#mapDiv{width:100%;height:400px}input,b,p{margin-left:5px;font-size:14px}</style> <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=9e70e9aa0be51fe8ad220e1c4b5d5aa5"></script> <script> var map; var zoom = 3; var geocoder; function onLoad() { //初始化地圖對象 map=new T.Map("mapDiv"); //設置顯示地圖的中心點和級別 map.centerAndZoom(new T.LngLat(116.40969,39.89945),zoom) //創建對象 geocoder = new T.Geocoder(); //根據國家名稱自動搜索,對應的坐標,然后插入標注 var list=["美國","中國","阿拉伯聯合酋長國"]; for (let string of list) { geocoder.getPoint(string,searchResult); } } function searchResult(result){ console.log("經緯度: "+result.location.lat + ',' + result.location.lon) if(result.getStatus() == 0){ //創建標注對象 var marker = new T.Marker(result.getLocationPoint()); //向地圖上添加標注 map.addOverLay(marker); var markerInfoWin = new T.InfoWindow("信息窗口"); marker.addEventListener("click", function () { marker.openInfoWindow(markerInfoWin); });// 將標注添加到地圖中 }else{ alert(result.getMsg()); } } </script> </head> <body onLoad="onLoad()"> <div id="mapDiv"></div> <p>本示例演示如何使用地理編碼接口獲得坐標信息。</p> </body> </html> 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20
    

    
        21
    

    
        22
    

    
        23
    

    
        24
    

    
        25
    

    
        26
    

    
        27
    

    
        28
    

    
        29
    

    
        30
    

    
        31
    

    
        32
    

    
        33
    

    
        34
    

    
        35
    

    
        36
    

    
        37
    

    
        38
    

    
        39
    

    
        40
    

    
        41
    

    
        42
    

    
        43
    

    
        44
    

    
        45
    

    
        46
    

    
        47
    

    
        48
    

    
        49
    

    
        50
    

    
        51
    

    
        52
    

    
        53
    

    
        54
    

    
        55
    

    
        56

vue 引入天地圖

index.html 中引入天地圖在線 API

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>vue-tdt-demo</title> <!-- 引入天地圖在線 API --> <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密鑰" type="text/javascript"></script> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html> 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15

components 文件夾中新建 TdtMap.vue 組件

mounted() 中初始化天地圖

<template> <div :id="tdtMapDivID" class="divTdtMap"></div> </template> <script> export default { name: 'TdtMap', data() { return { tdtMapDivID: "tdtMapDivID_"+this._uid, tdtMap: {} } }, created() { }, mounted(){ // 初始化天地圖 this.initTdtMap() }, watch: { }, methods: { // 初始化天地圖 initTdtMap(){ this.tdtMap = new T.Map(this.tdtMapDivID) this.tdtMap.centerAndZoom(new T.LngLat(116.40769, 39.89945), 12) }, } } </script> <style scoped> .divTdtMap { margin: 0px; padding: 0px; width: 100%; height: 80vh; z-index: 0; } </style> 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20
    

    
        21
    

    
        22
    

    
        23
    

    
        24
    

    
        25
    

    
        26
    

    
        27
    

    
        28
    

    
        29
    

    
        30
    

    
        31
    

    
        32
    

    
        33
    

    
        34
    

    
        35
    

    
        36
    

    
        37
    

    
        38
    

    
        39
    

    
        40
    

    
        41

測試組件，新建 test.vue

導入組件、注冊組件和使用組件

<template> <!-- 使用組件 --> <TdtMap></TdtMap> </template> <script> /* 導入組件 */ import TdtMap from './components/TdtMap' export default { name: 'TdtMap', components: { /* 注冊組件 */ TdtMap, }, data() { return { } }, created() { }, mounted(){ }, watch: { }, methods: { }, } </script> <style scoped> </style> 


    
        1
    

    
        2
    

    
        3
    

    
        4
    

    
        5
    

    
        6
    

    
        7
    

    
        8
    

    
        9
    

    
        10
    

    
        11
    

    
        12
    

    
        13
    

    
        14
    

    
        15
    

    
        16
    

    
        17
    

    
        18
    

    
        19
    

    
        20
    

    
        21
    

    
        22
    

    
        23
    

    
        24
    

    
        25
    

    
        26
    

    
        27
    

    
        28
    

    
        29
    

    
        30
    

    
        31
    

    
        32
    

    
        33
    

    
        34

隱藏天地圖LOGO

 document.getElementsByClassName("tdt-control-copyright tdt-control")[0].style.display = 'none' 


    
        1

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

轉自：csdn
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網站建設、平面設計服務