大發(fā)
1.0, user-scalable=no" /> <script type="text/javascript" src="鏈接您的密鑰"></script> <title>Hello</title> <style type="text/css"> body, ,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;} </style></head><body> <div id="allmap"></div></body></><script type="text/javascript"> /** 地圖API功能 **/ var map = new BMap.Map("allmap"); // 創(chuàng)建Map實例 var nt = new BMap.Point(11
6.404, 3
9.915); // 創(chuàng)建點坐標 map.centerAndZoom(nt,15); // 初始化地圖,設(shè)置中心點坐標和地圖級別。 var marker1 = new BMap.Marker(new BMap.Point(11
6.384, 3
9.925)); // 創(chuàng)建標注 map.addOverlay(marker1); // 將標注添加到地圖中</script>這個例子是Demo里小改來的。使用API之前,需要先在它家的官網(wǎng)注冊一下,注冊后會得到一個24位字符串的密鑰,用它替換上文的"您的密鑰"。在這個里,先定義一個名字是"allmap"的div元素,然后在javascript創(chuàng)建Map,創(chuàng)建坐標,設(shè)置map的中心和縮放等級,然后在地圖上創(chuàng)建一個標注Marker,所謂標注就是一個指示地點的尖底圓頭圖標。在鏈接,假如拖動地圖的話,前端將計算出新地圖所在矩形經(jīng)緯度,然后根據(jù)經(jīng)緯度的數(shù)值,用ajax調(diào)用tornado后端,獲取矩形經(jīng)緯度之內(nèi)的Top餐廳的信息,包括餐廳的經(jīng)緯度,餐廳的名字,餐廳地址等等,把餐廳繪制到當前地圖上。當鼠標懸停在餐廳上的時候,地圖會彈出一個小框顯示餐廳名,點擊餐廳,會打開大眾點評網(wǎng)上的餐廳頁面。如果鼠標懸停在右側(cè)的餐廳名,那么左側(cè)的地圖會在餐廳的地理位置上彈出小框,顯示餐廳名。至于用ajax調(diào)用tornado后端,用jquery就行。比如,在tornado后端創(chuàng)建一個路由"/getshopmarkers",然后實現(xiàn)一個post方法,這個方法根據(jù)矩形經(jīng)緯度從數(shù)據(jù)庫餐廳信息,然后用on返回結(jié)果,那么,前端用ajax調(diào)用的方式就是: var posting = $.post("/getshopmarkers", {"lng_min":bssw.lng,"lng_max":bsne.lng,"lat_min":bssw.lat, "lat_max":bsne.lat, "_xsrf":get_cookie("_xsrf")}); posting.done(function(data){ var dataObj = eval("("+data+")"); var allshopnum = dataObj[0]["allshopnum"]; dataObj.shift(); //生成marker for(var x in dataObj){ lng = parseFloat(dataObj[x]["lng"]); lat = parseFloat(dataObj[x]["lat"]); var p = new BMap.Point(lng, lat); ... } $("#mp_content").(newcontent); }); posting.fail(function(){ alert("Error: can not update markers."); });地圖的用法簡化到最基本的東東就是這兩段代碼,通常來說前端同學使用地圖沒太大難度,主要是花時間熟悉API,然后設(shè)計如何用這些API構(gòu)造出足夠好用的特效,官方API只能保證功能可用,但不能保證美感和酷炫。在非常罕見的情況下,會遇到官方API的bug,在地圖不提供源代碼,只能繞過去或者改設(shè)計。對前端來說,設(shè)計無止境,美工無止境,速度優(yōu)化無止境,兼容性無止境。千里執(zhí)行,始于足下。
十二
格萊西雅
梭哈小旋風
2021-09-23 17:28:49 1215查看 0回答
用戶dmmdddm
2021-09-23 17:28:53 778查看 1回答
清脆小蘿卜
2021-09-23 17:30:00 449查看 1回答
2021-09-23 17:30:18 421查看 0回答
你那么驕傲不如
2021-09-23 17:46:01 414查看 2回答
小灰灰
2021-09-23 17:49:56 526查看 2回答
陽光傾城
2021-09-23 17:51:24 407查看 3回答
流沙
2021-09-23 17:51:24 383查看 2回答
大發(fā)
2021-09-23 17:52:50 493查看 5回答