Web各大地圖開發(fā)

2021-9-17    前端達人

Web各大地圖開發(fā)

介紹

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

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

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

  1. 高德地圖

    https://lbs.amap.com/ 開發(fā)者平臺

  2. 百度地圖

    https://lbsyun.baidu.com/ 開發(fā)者平臺

  3. 騰訊地圖

    https://lbs.qq.com/ 開發(fā)者平臺

  4. 天地圖

    https://www.tianditu.gov.cn/ 開發(fā)者平臺

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

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

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

開發(fā)地圖需要的準(zhǔn)備

  1. 進入天地圖頁面

  2. 注冊賬號

  3. 申請成為開發(fā)者

    開發(fā)者分為: 個人開發(fā)者和企業(yè)開發(fā)者 根據(jù)情況自行選擇

  4. 然后根據(jù)需求創(chuàng)建應(yīng)用-生成應(yīng)用key

  5. 入門Dome

    實例代碼:

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

    <!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 那么就是區(qū)級別

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

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

    上案例效果圖:

各種需求進行開發(fā)

頁面

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

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

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

接口服務(wù)

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

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

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

查詢: 北京市延慶區(qū)延慶鎮(zhèn)蓮花池村前街50夕陽紅養(yǎng)老院的坐標(biāo)

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

接口返回的數(shù)據(jù):

{“msg”:“ok”,“l(fā)ocation”:{“score”:40,“l(fā)evel”:“地名地址”,“l(fā)on”:116.002677524,“l(fā)at”:40.4509903540001,“keyWord”:“北京市延慶區(qū)延慶鎮(zhèn)蓮花池村前街50夕陽紅養(yǎng)老院”},“searchVersion”:“6.0.0”,“status”:“0”}

響應(yīng)接口

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

location

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

然后在代碼里通過 

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

    

    
  • 
        1
    
    •

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

標(biāo)注案例

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

在天地圖提供的實例中是默認(rèn)鼠標(biāo)點擊顯示,然后點擊消失,實際中這樣太麻煩了我們稍作修改,改變?yōu)槭髽?biāo)懸浮顯示,鼠標(biāo)離開消失

修改后的代碼 

<!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,"地址：北京市東城區(qū)王府井大街88號樂天銀泰百貨八層"], [116.406605,39.921585,"地址：北京市東城區(qū)東華門大街"], [116.412222,39.912345,"地址：北京市東城區(qū)正義路甲5號"] ]; //初始化地圖對象 map = new T.Map("mapDiv"); //設(shè)置顯示地圖的中心點和級別 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])); // 創(chuàng)建標(biāo)注 var content = data_info[i][2]; map.addOverLay(marker); // 將標(biāo)注添加到地圖中 addClickHandler(content,marker); } function addClickHandler(content,marker){ // 改為鼠標(biāo)懸浮顯示 marker.addEventListener("mouseover",function(e){ openInfo(content,e)} ); //添加鼠標(biāo)離開后關(guān)閉提示框 marker.addEventListener("mouseout",function(e){ map.closeInfoWindow() } ); } function openInfo(content,e){ var point = e.lnglat; marker = new T.Marker(point);// 創(chuàng)建標(biāo)注 var markerInfoWin = new T.InfoWindow(content,{offset:new T.Point(0,-30)}); // 創(chuàng)建信息窗口對象 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
    
    •

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

<!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"); //設(shè)置顯示地圖的中心點和級別 map.centerAndZoom(new T.LngLat(116.40969,39.89945),zoom) //創(chuàng)建對象 geocoder = new T.Geocoder(); //根據(jù)國家名稱自動搜索,對應(yīng)的坐標(biāo),然后插入標(biāo)注 var list=["美國","中國","阿拉伯聯(lián)合酋長國"]; for (let string of list) { geocoder.getPoint(string,searchResult); } } function searchResult(result){ console.log("經(jīng)緯度: "+result.location.lat + ',' + result.location.lon) if(result.getStatus() == 0){ //創(chuàng)建標(biāo)注對象 var marker = new T.Marker(result.getLocationPoint()); //向地圖上添加標(biāo)注 map.addOverLay(marker); var markerInfoWin = new T.InfoWindow("信息窗口"); marker.addEventListener("click", function () { marker.openInfoWindow(markerInfoWin); });// 將標(biāo)注添加到地圖中 }else{ alert(result.getMsg()); } } </script> </head> <body onLoad="onLoad()"> <div id="mapDiv"></div> <p>本示例演示如何使用地理編碼接口獲得坐標(biāo)信息。</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

導(dǎo)入 組件、注冊 組件和 使用 組件 

<template> <!-- 使用組件 --> <TdtMap></TdtMap> </template> <script> /* 導(dǎo)入組件 */ 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
    
    •











































藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

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

轉(zhuǎn)自：csdn
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)


日歷

鏈接

個人資料

存檔