百度狱庇、高德惊畏、騰訊地圖現(xiàn)在商業(yè)授權(quán)費都是5W/年。網(wǎng)站密任、APP颜启、企業(yè)內(nèi)部應(yīng)用都算商業(yè)用圖。不想吃官司又沒有錢的小公司只能尋找免費的地圖了浪讳。
目前還能免費使用的有：天地圖缰盏、凱立德、維智、圖炫
這里整理了天地圖的Web接入方法供大家參考
天地圖雖然沒有其他幾個好看口猜，但畢竟是國家隊(自然資源部)负溪，穩(wěn)定性應(yīng)該更有保障吧。
百度地圖商業(yè)授權(quán)價格
注冊
打開 https://www.tianditu.gov.cn/ 济炎，選個人注冊就可以了川抡，如果配額不夠，個人賬號也可以進(jìn)行企業(yè)認(rèn)證（也可以多注冊幾個個人賬戶來提升配額）
申請成為開發(fā)者
打開控制臺须尚，登陸剛剛注冊好的賬戶崖堤，申請成為開發(fā)者，這里也可以選 個人開發(fā)者
申請成為開發(fā)者
創(chuàng)建應(yīng)用
成為開發(fā)者后耐床，在控制臺首頁可以看見應(yīng)用管理**密幔，點擊創(chuàng)建應(yīng)用
創(chuàng)建應(yīng)用
填寫名稱、選擇行業(yè)撩轰、選擇應(yīng)用類型胯甩。類型這里 因為我們需要Web頁面使用 選了瀏覽器端。
注意白名單填寫完整域名用,隔開堪嫂，如：www.lmlq.com,m.lmlq.com蜡豹，不接受泛域名如*.lmlq.com
創(chuàng)建應(yīng)用
創(chuàng)建后你就得到了應(yīng)用的API Key了，先復(fù)制一下溉苛，馬上用到
API Key在這里
添加到Web頁面
官方文檔：JavaScript API 4.0
這里給一個做好的頁面的例子镜廉，添加上自己的API Key、改改文字和坐標(biāo)就可以直接使用了：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liming map From Tianditu</title>
<style type="text/css">
body, html{width:100%;height:100%;margin:0;}
#mapDiv .tdt-infowindow-content>h2{font-size:20px;margin: 5px 0 10px;}
#mapDiv .tdt-infowindow-content>p{font-size:14px;margin: 0 0 5px;}
#mapDiv .tdt-infowindow-content img{float:right;width:60px;height:60px;margin-left:10px}
#mapDiv {height:100%;width:100%;overflow:hidden}
.tdt-control-copyright{opacity: 0.4;}
@media (max-width: 500px) {
#youbian{display: none;}
}
@media (min-width: 501px) {
#mapDiv .tdt-infowindow-content img{float:right;width:80px;height:80px;margin-left:10px}
}
</style>
</head>
<body>
<div id="mapDiv"></div>
<script type="text/javascript" src="https://api.tianditu.gov.cn/api?v=4.0&tk=【這個地方要改成你的API Key】" ></script>
<script type="text/javascript">
window.onload = function(){
var map;
var zoom = 15;
map = new T.Map('mapDiv');
map.centerAndZoom(new T.LngLat(113.5045, 34.812), zoom);
var licontent=`<h2>黎明重工股份有限公司</h2>
<img src="https://www.lmlq.com/img/logo-map.png">
<p><strong>地址：</strong>中國-鄭州-國家高新技術(shù)產(chǎn)業(yè)開發(fā)區(qū)科學(xué)大道169號</p>
<p id="youbian"><span><strong>郵編：</strong>450001</span></p>
<p><strong>電話：</strong>4006551888 0371-67986666</p>
<p><strong>網(wǎng)站：</strong><a target="_top">www.lmzg.com</a></p>`;
var marker = new T.Marker(new T.LngLat(113.5045, 34.808));
console.log(marker)
map.addOverLay(marker);
var infoWindow
if(window.innerWidth > 500) {
infoWindow = new T.InfoWindow(licontent, {minWidth:450});
} else {
infoWindow = new T.InfoWindow(licontent, {minWidth:240});
}
marker.openInfoWindow(infoWindow);
}
</script>
</body>
</html>
使用方法有兩種：
- 把上面的
HTML內(nèi)容保存下來愚战，用<iframe>引入 - 直接寫入頁面中
