爲了監視快遞小哥，我作了一個小程序！
我感受我能夠在電腦上查看快遞小哥離我有多遠了!javascript
應用演示地址: http://geomap.wilddogapp.com/css
源碼下載: http://git.oschina.net/chengxinxin/wildGeo 下載到本地解壓後便可運行。因爲流量問題,請先替換源碼
delivery.js中的appIdhtmlappId註冊連接: https://www.wilddog.com/my-account/signup。前端
咱們來看一下代碼。
從地圖展示的程度來講,這個地圖佈局基本沒有難度。若是你對我這麼說感到疑惑那麼我建議你能夠看看這個: 高德地圖示例中心。你應該很快能夠構建出想wildGeo這樣的界面。若是你對此表示有難度的話,請拷貝下面的代碼到一個空白的HTML文件中:java
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>基本地圖展現</title>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
<script src="http://webapi.amap.com/maps?v=1.3&key=您申請的key值"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<script>
var map = new AMap.Map('container', {
resizeEnable: true,
zoom:11,
center: [116.397428, 39.90923]
});
</script>
</body>
</html>
這樣你就能夠在瀏覽器中打開一張地圖了。android
下面咱們該幹什麼了? Coding!
咱們須要在地圖上標註配送站的信息,高德地圖上叫作 自定義標記覆蓋物,野狗的wildGeo工程師是這樣寫的:ios
//自定義點標記內容
var stationMarkerContent = document.createElement("div");
stationMarkerContent.className = "markerContentStyle";
//點標記中的圖標
var stationMarkerImg = document.createElement("img");
stationMarkerImg.className = "markerlnglat";
stationMarkerImg.src ="http://webapi.amap.com/images/marker_sprite.png";
stationMarkerContent.appendChild(stationMarkerImg);
//點標記中的文本
var stationMarkerSpan = document.createElement("span");
stationMarkerSpan.innerHTML = '配送站';
stationMarkerSpan.setAttribute("class", "span1")
stationMarkerContent.appendChild(stationMarkerSpan);
var stationMarker = new AMap.Marker({ //AMap.Marker是很是重要的點,關於樣式若是不是很符合你的要求,你能夠手動去改!
map:map,
position:new AMap.LngLat(116.408032,39.897614),//基點位置
autoRotation:false,
content: stationMarkerContent //自定義點標記覆蓋物內容,這個地方能夠直接寫HTML文件
});
野狗工程師在作wildGeo用的是JavaScript來作的,他定義了一個 stationMarkerContent 來盛放自定義標記覆蓋物的內容。以後把標價覆蓋物的HTML代碼構造好了放到了 AMap.Marker 對象的content中。你固然能夠直接在content中寫好你構造好的HTML代碼字符串。git
完成以上的步驟,客戶實現的效果是,一張地圖,以後會有一個配送站地理位置圖標,和配送站三個文字。github
由於咱們須要肯定是地圖上任意一個點上某個範圍內的送餐員電話,因此咱們須要一某個點爲中心畫圓,固然,高德地圖給咱們提供了這樣的一個接口。web
var circle = new AMap.Circle({
map:map,//map指的是你建立的地圖對象,就是這篇文章第五個代碼塊中的那個map對象
center:loc,// 圓心位置
radius:(1500), //半徑
strokeColor: "#6D3099", //線顏色
strokeOpacity: 1, //線透明度
strokeWeight: 3, //線粗細度
fillColor: "#B650FF", //填充顏色
fillOpacity: 0.35//填充透明度
});
以後地圖上會有一個出現一個表示範圍的圓環。下面就是野狗實施後端雲大顯身手的時間了! 別忘記註冊 野狗 帳號
首先,若是你要經過 ctrl+c 和 ctrl+p 以後代碼就可使用的話,你必定要了解後臺的數據結構。wildGeo數據結構以下:
{
"_geofire": {
"beijing:0000": {
"g": "wx4dwxwtp8",
"l": [
39.856513,
116.310528
]
},
"beijing:0001": {
"g": "wx4en9qsrw",
"l": [
39.909971999999996,
116.310528
]
},
"beijing:0100": {
"g": "wx4f8rstp8",
"l": [
39.856513,
116.3846855
]
},
"beijing:0101": {
"g": "wx4g03ksrw",
"l": [
39.909971999999996,
116.3846855
]
}
},
"beijing": {
"delivery": {
"0000": {
"id": "0000",
"lat": 39.856513,
"lng": 116.310528
},
"0001": {
"id": "0001",
"lat": 39.909971999999996,
"lng": 116.310528
},
"0100": {
"id": "0100",
"lat": 39.856513,
"lng": 116.3846855
},
"0101": {
"id": "0101",
"lat": 39.909971999999996,
"lng": 116.3846855
}
}
}
}
大家必定要明白數據結構和數據的區別!你能夠把上面的數據複製到本地的一個json文件中,以後導入到你的野狗app裏面去。
以後創建也野狗對象
//map variable
var map;
// Set the center as Wilddog HQ
var locations = {
"WilddogHQ": [39.897614,116.408032]
};
var center = locations["WilddogHQ"];
// Get a reference to the Wilddog public transit open data set
var transitWilddogRef = new Wilddog("https://<appId>.wilddogio.com/")
野狗爲了更好的和地圖是進行適配,開發了wildGeo對象,他是一個單獨的js,有興趣的開發者能夠 下載 或 閱讀文檔
咱們在創建了transitwilddogRef對象的基礎上,須要盡力wildGeo對象。
// Create a new WildGeo instance, pulling data from the public transit data
var wildGeo = new WildGeo(transitWilddogRef.child("_geofire"));
上面的代碼說明了,建立wildGeo對象來操做地理座標數據,數據來源於transitWilddogRef下面的_geofire節點。
以後,咱們來看一下怎樣數據初始化。
/*************/
/* GEOQUERY */
/*************/
// Keep track of all of the deliverys currently within the query
var deliverysInQuery = {};
// Create a new GeoQuery instance
var geoQuery = wildGeo.query({
center: center, //center指的是 var center = locations["WilddogHQ"];
radius: 1500
});
/* Adds new delivery markers to the map when they enter the query */
geoQuery.on("key_entered", function(deliveryId, deliveryLocation) {
// Specify that the delivery has entered this query
deliveryId = deliveryId.split(":")[1];
deliverysInQuery[deliveryId] = true;
// Look up the delivery's data in the Transit Open Data Set
transitWilddogRef.child("beijing/delivery").child(deliveryId).once("value", function(dataSnapshot) {
// Get the delivery data from the Open Data Set
delivery = dataSnapshot.val();
// If the delivery has not already exited this query in the time it took to look up its data in the Open Data
// Set, add it to the map
if (delivery !== null && deliverysInQuery[deliveryId] === true) {
// Add the delivery to the list of deliverys in the query
deliverysInQuery[deliveryId] = delivery;
// Create a new marker for the delivery
delivery.marker = createdeliveryMarker(delivery);
}
});
});
咱們須要觀察幾個點:
第一個點是
wildGeo.query()以後會產生一個新的對象叫作:geoQuery。geoQuery.on(eventType,callback)eventType是事件類型:這裏用的是key_entered,表示監聽的點是否進入範圍以內。若是進入則存到deliverysInQuery對象中去,經過createdeliveryMarker方法,在地圖上建立一個個的快遞員圖標。
那麼若是快遞離開了咱們的那個範圍呢?
geoQuery.on("key_exited", function(deliveryId, deliveryLocation) {
// Get the delivery from the list of deliverys in the query
deliveryId = deliveryId.split(":")[1];
var delivery = deliverysInQuery[deliveryId];
// If the delivery's data has already been loaded from the Open Data Set, remove its marker from the map
if (delivery !== true && typeof delivery.marker !== "undefined") {
delivery.marker.stopMove();
delivery.marker.setMap(null);
}
// Remove the delivery from the list of deliverys in the query
delete deliverysInQuery[deliveryId];
});
咱們可使用key_exited這個方法,來監聽離開咱們的快遞員。
最後附上createdeliveryMarker方法。
/**********************/
/* HELPER FUNCTIONS */
/**********************/
/* Adds a marker for the inputted delivery to the map */
function createdeliveryMarker(delivery) {
//自定義點標記內容
var markerContent = document.createElement("div");
markerContent.className = "markerContentStyle";
//點標記中的圖標
var markerImg = document.createElement("img");
markerImg.className = "markerlnglat";
markerImg.src = "images/man.png";
markerImg.height = "35";
markerImg.width = "27";
markerContent.appendChild(markerImg);
//點標記中的文本
var markerSpan = document.createElement("span");
markerSpan.innerHTML = delivery.id;
markerContent.appendChild(markerSpan);
var marker = new AMap.Marker({
map:map,
position:new AMap.LngLat(delivery.lng, delivery.lat),//基點位置
autoRotation:false,
content: markerContent //自定義點標記覆蓋物內容
});
return marker;
}
和地圖初始化代碼片斷
function initializeMap() {
var loc = new AMap.LngLat(center[1], center[0]);
//初始化地圖對象，加載地圖
var UA = navigator.userAgent;
if (UA.indexOf("Mobile") == -1 || UA.indexOf("Mobile") == -1) {
defineMap(loc, 15);
} else {
defineMap(loc , 13);
};
//加載工具條
// map.plugin(["AMap.ToolBar"],function(){
// var tool = new AMap.ToolBar();
// map.addControl(tool);
// });
//
// //加載比例尺
// map.plugin(["AMap.Scale"],function(){
// var scale = new AMap.Scale();
// map.addControl(scale);
// });
var circle = new AMap.Circle({
map:map,
center:loc,// 圓心位置
radius:((radiusInKm) * 1000), //半徑
strokeColor: "#6D3099", //線顏色
strokeOpacity: 1, //線透明度
strokeWeight: 3, //線粗細度
fillColor: "#B650FF", //填充顏色
fillOpacity: 0.35//填充透明度
});
//自定義點標記內容
var stationMarkerContent = document.createElement("div");
stationMarkerContent.className = "markerContentStyle";
//點標記中的圖標
var stationMarkerImg = document.createElement("img");
stationMarkerImg.className = "markerlnglat";
stationMarkerImg.src ="http://webapi.amap.com/images/marker_sprite.png";
stationMarkerContent.appendChild(stationMarkerImg);
//點標記中的文本
var stationMarkerSpan = document.createElement("span");
stationMarkerSpan.innerHTML = '配送站';
stationMarkerSpan.setAttribute("class", "span1")
stationMarkerContent.appendChild(stationMarkerSpan);
var stationMarker = new AMap.Marker({
map:map,
position:new AMap.LngLat(116.408032,39.897614),//基點位置
autoRotation:false,
content: stationMarkerContent //自定義點標記覆蓋物內容
});
var lnglat;
var clickEventListener = AMap.event.addListener(map,'click',function(e){
lnglat=e.lnglat;
circle.setCenter(lnglat);
updateCriteria();
});
var updateCriteria = _.debounce(function() {
lnglat = circle.getCenter();
geoQuery.updateCriteria({
center: [lnglat.getLat(), lnglat.getLng()],
radius: radiusInKm
});
}, 10);
}
累死妹子了!
做爲一個博愛的程序媛,我還要必定要作這個事情（爲何我寫了這句話感受到好邪惡！）:
鑑於本人是一個前端攻城獅,因此這兩個版本的東西我也就只能給大家一個連接吧,各位IOS攻城獅和Android攻城獅,來玩玩麼?
相關文章
- 1. 快速瞭解小程序
- 2. 作了4個微信小程序後，我總結了一個快速開發流程
- 3. 小哥哥，WebRTC 瞭解一下
- 4. 最近寫了一個小程序
- 5. 我和一位快遞小哥的故事
- 6. 做了4個微信小程序後，我總結了一個快速開發流程
- 7. 微信小程序（一）快遞查詢
- 8. 小程序18問，3分鐘快速瞭解小程序
- 9. 我寫了一個Python小項目
- 10. 我從小程序學到了什麼
- 更多相關文章...
- • 第一個MyBatis程序 - MyBatis教程
- • 第一個Hibernate程序 - Hibernate教程
- • 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解
- • RxJava操作符（一）Creating Observables
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 快速瞭解小程序
- 2. 作了4個微信小程序後，我總結了一個快速開發流程
- 3. 小哥哥，WebRTC 瞭解一下
- 4. 最近寫了一個小程序
- 5. 我和一位快遞小哥的故事
- 6. 做了4個微信小程序後，我總結了一個快速開發流程
- 7. 微信小程序（一）快遞查詢
- 8. 小程序18問，3分鐘快速瞭解小程序
- 9. 我寫了一個Python小項目
- 10. 我從小程序學到了什麼