為了監視快遞小哥，我做了一個小程序！

CompileYouth 發布于2019-08-20 10:48 / 1520人閱讀

摘要：因為我們需要確定是地圖上任意一個點上某個范圍內的送餐員電話所以我們需要一某個點為中心畫圓當然高德地圖給我們提供了這樣的一個接口。

我感覺我可以在電腦上查看快遞小哥離我有多遠了!

應用演示地址: http://geomap.wilddogapp.com/

源碼下載: http://git.oschina.net/chengxinxin/wildGeo 下載到本地解壓后即可運行。由于流量問題,請先替換源碼delivery.js中的appId

appId注冊鏈接: https://www.wilddog.com/my-account/signup。

我們來看一下代碼。

從地圖展現的程度來說,這個地圖布局基本沒有難度。如果你對我這么說感到疑惑那么我建議你可以看看這個: 高德地圖示例中心。你應該很快可以構建出想wildGeo這樣的界面。如果你對此表示有難度的話,請拷貝下面的代碼到一個空白的HTML文件中:




    
    
    
    基本地圖展示

這樣你就可以在瀏覽器中打開一張地圖了。

下面我們該干什么了? Coding!

我們需要在地圖上標注配送站的信息,高德地圖上叫做自定義標記覆蓋物,野狗的wildGeo工程師是這樣寫的:

//自定義點標記內容   
    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代碼字符串。

完成以上的步驟,客戶實現的效果是,一張地圖,之后會有一個配送站地理位置圖標,和配送站三個文字。

因為我們需要確定是地圖上任意一個點上某個范圍內的送餐員電話,所以我們需要一某個點為中心畫圓,當然,高德地圖給我們提供了這樣的一個接口。

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://.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);
}

累死妹子了!

作為一個博愛的程序媛,我還要一定要做這個事情（為什么我寫了這句話感覺到好邪惡！）:

Android版本: https://github.com/WildDogTeam/lib-android-wildgeo

IOS版本: https://github.com/WildDogTeam/lib-ios-wildgeo

鑒于本人是一個前端攻城獅,所以這兩個版本的東西我也就只能給你們一個鏈接吧,各位IOS攻城獅和Android攻城獅,來玩玩么?

云服務器 GPU云服務器我做了一個小程序下載一個小程序做一個小程序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80329.html

為了監視快遞小哥，我做了一個小程序！

摘要：因為我們需要確定是地圖上任意一個點上某個范圍內的送餐員電話所以我們需要一某個點為中心畫圓當然高德地圖給我們提供了這樣的一個接口。我感覺我可以在電腦上查看快遞小哥離我有多遠了! 應用演示地址: http://geomap.wilddogapp.com/ 源碼下載: http://git.oschina.net/chengxinxin/wildGeo 下載到本地解壓后即可運行。由于流量...

BLUE 2019-08-29 11:14 評論0 收藏0
為了監視快遞小哥，我做了一個小程序！

摘要：因為我們需要確定是地圖上任意一個點上某個范圍內的送餐員電話所以我們需要一某個點為中心畫圓當然高德地圖給我們提供了這樣的一個接口。我感覺我可以在電腦上查看快遞小哥離我有多遠了! 應用演示地址: http://geomap.wilddogapp.com/ 源碼下載: http://git.oschina.net/chengxinxin/wildGeo 下載到本地解壓后即可運行。由于流量...

Worktile 2019-06-26 17:04 評論0 收藏0
url輸入后的故事

摘要：演員表角色名稱扮演者小劉瀏覽器小李普通用戶小川傳輸層快遞小哥小汪網絡層老四目標服務器比特大叔電流 ??小劉（瀏覽器）是一個批發商，小李（普通用戶）是一個超市的進貨經理，一天小李經理來到了小劉老板的店鋪，說：我‘要（www.baidu.com）類的所有東西’，小劉老板說：‘我得用我們的行話（IP）告訴底下的人你要的東西他才知道你要啥’，小劉老板從身上掏出一個本本（瀏覽器緩存的DNS），...

wuyangchun 2019-08-23 15:23 評論0 收藏0