為了監(jiān)視快遞小哥，我做了一個(gè)小程序！

BLUE 發(fā)布于2019-08-29 11:14 / 3467人閱讀

摘要：因?yàn)槲覀冃枰_定是地圖上任意一個(gè)點(diǎn)上某個(gè)范圍內(nèi)的送餐員電話所以我們需要一某個(gè)點(diǎn)為中心畫圓當(dāng)然高德地圖給我們提供了這樣的一個(gè)接口。

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

應(yīng)用演示地址: http://geomap.wilddogapp.com/

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

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

我們來看一下代碼。

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




    
    
    
    基本地圖展示

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

下面我們?cè)摳墒裁戳? Coding!

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

//自定義點(diǎn)標(biāo)記內(nèi)容   
    var stationMarkerContent = document.createElement("div");
    stationMarkerContent.className = "markerContentStyle";
        
    //點(diǎn)標(biāo)記中的圖標(biāo)
    var stationMarkerImg = document.createElement("img");
    stationMarkerImg.className = "markerlnglat";
    stationMarkerImg.src ="http://webapi.amap.com/images/marker_sprite.png";
    stationMarkerContent.appendChild(stationMarkerImg);
         
    //點(diǎn)標(biāo)記中的文本
    var stationMarkerSpan = document.createElement("span");
    stationMarkerSpan.innerHTML = "配送站";
    stationMarkerSpan.setAttribute("class", "span1")
    stationMarkerContent.appendChild(stationMarkerSpan);

    var stationMarker  = new AMap.Marker({ //AMap.Marker是非常重要的點(diǎn),關(guān)于樣式如果不是很符合你的要求,你可以手動(dòng)去改!
        map:map,
        position:new AMap.LngLat(116.408032,39.897614),//基點(diǎn)位置
        autoRotation:false,
        content: stationMarkerContent //自定義點(diǎn)標(biāo)記覆蓋物內(nèi)容,這個(gè)地方可以直接寫HTML文件
    });

野狗工程師在做wildGeo用的是JavaScript來做的,他定義了一個(gè) stationMarkerContent 來盛放自定義標(biāo)記覆蓋物的內(nèi)容。之后把標(biāo)價(jià)覆蓋物的HTML代碼構(gòu)造好了放到了 AMap.Marker 對(duì)象的content中。你當(dāng)然可以直接在content中寫好你構(gòu)造好的HTML代碼字符串。

完成以上的步驟,客戶實(shí)現(xiàn)的效果是,一張地圖,之后會(huì)有一個(gè)配送站地理位置圖標(biāo),和配送站三個(gè)文字。

因?yàn)槲覀冃枰_定是地圖上任意一個(gè)點(diǎn)上某個(gè)范圍內(nèi)的送餐員電話,所以我們需要一某個(gè)點(diǎn)為中心畫圓,當(dāng)然,高德地圖給我們提供了這樣的一個(gè)接口。

var circle = new AMap.Circle({ 
        map:map,//map指的是你創(chuàng)建的地圖對(duì)象,就是這篇文章第五個(gè)代碼塊中的那個(gè)map對(duì)象
         center:loc,// 圓心位置
        radius:(1500), //半徑
        strokeColor: "#6D3099", //線顏色
        strokeOpacity: 1, //線透明度
        strokeWeight: 3, //線粗細(xì)度
        fillColor: "#B650FF", //填充顏色
        fillOpacity: 0.35//填充透明度

    });

之后地圖上會(huì)有一個(gè)出現(xiàn)一個(gè)表示范圍的圓環(huán)。下面就是野狗實(shí)施后端云大顯身手的時(shí)間了! 別忘記注冊(cè) 野狗賬號(hào)

首先,如果你要通過 ctrl+c 和 ctrl+p 之后代碼就可以使用的話,你一定要了解后臺(tái)的數(shù)據(jù)結(jié)構(gòu)。wildGeo數(shù)據(jù)結(jié)構(gòu)如下:

{
    "_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
            }
        }
    }
}

你們一定要明白數(shù)據(jù)結(jié)構(gòu)和數(shù)據(jù)的區(qū)別!你可以把上面的數(shù)據(jù)復(fù)制到本地的一個(gè)json文件中,之后導(dǎo)入到你的野狗app里面去。
之后建立也野狗對(duì)象

//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/")

野狗為了更好的和地圖是進(jìn)行適配,開發(fā)了wildGeo對(duì)象,他是一個(gè)多帶帶的js,有興趣的開發(fā)者可以下載或閱讀文檔

我們?cè)诮⒘?b>transitwilddogRef對(duì)象的基礎(chǔ)上,需要盡力wildGeo對(duì)象。

// Create a new WildGeo instance, pulling data from the public transit data
var wildGeo = new WildGeo(transitWilddogRef.child("_geofire"));

上面的代碼說明了,創(chuàng)建wildGeo對(duì)象來操作地理坐標(biāo)數(shù)據(jù),數(shù)據(jù)來源于transitWilddogRef下面的_geofire節(jié)點(diǎn)。

之后,我們來看一下怎樣數(shù)據(jù)初始化。

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

我們需要觀察幾個(gè)點(diǎn):

第一個(gè)點(diǎn)是wildGeo.query() 之后會(huì)產(chǎn)生一個(gè)新的對(duì)象叫做:geoQuery。

geoQuery.on(eventType,callback) eventType是事件類型:這里用的是key_entered,表示監(jiān)聽的點(diǎn)是否進(jìn)入范圍之內(nèi)。如果進(jìn)入則存到deliverysInQuery對(duì)象中去,通過createdeliveryMarker方法,在地圖上創(chuàng)建一個(gè)個(gè)的快遞員圖標(biāo)。

那么如果快遞離開了我們的那個(gè)范圍呢?

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這個(gè)方法,來監(jiān)聽離開我們的快遞員。

最后附上createdeliveryMarker方法。

/**********************/
/*  HELPER FUNCTIONS  */
/**********************/
/* Adds a marker for the inputted delivery to the map */
function createdeliveryMarker(delivery) {
    //自定義點(diǎn)標(biāo)記內(nèi)容   
    var markerContent = document.createElement("div");
    markerContent.className = "markerContentStyle";
        
    //點(diǎn)標(biāo)記中的圖標(biāo)
    var markerImg = document.createElement("img");
    markerImg.className = "markerlnglat";
    markerImg.src = "images/man.png";
    markerImg.height = "35";
    markerImg.width = "27";
    markerContent.appendChild(markerImg);
         
    //點(diǎn)標(biāo)記中的文本
    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),//基點(diǎn)位置
        autoRotation:false,
        content: markerContent //自定義點(diǎn)標(biāo)記覆蓋物內(nèi)容
        
    });
      return marker;
}

和地圖初始化代碼片段

function initializeMap() {
    var loc = new AMap.LngLat(center[1], center[0]);
    //初始化地圖對(duì)象，加載地圖
    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, //線粗細(xì)度
        fillColor: "#B650FF", //填充顏色
        fillOpacity: 0.35//填充透明度

    }); 

    //自定義點(diǎn)標(biāo)記內(nèi)容   
    var stationMarkerContent = document.createElement("div");
    stationMarkerContent.className = "markerContentStyle";
        
    //點(diǎn)標(biāo)記中的圖標(biāo)
    var stationMarkerImg = document.createElement("img");
    stationMarkerImg.className = "markerlnglat";
    stationMarkerImg.src ="http://webapi.amap.com/images/marker_sprite.png";
    stationMarkerContent.appendChild(stationMarkerImg);
         
    //點(diǎn)標(biāo)記中的文本
    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),//基點(diǎn)位置
        autoRotation:false,
        content: stationMarkerContent //自定義點(diǎn)標(biāo)記覆蓋物內(nèi)容
    });

    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);
}

累死妹子了!

作為一個(gè)博愛的程序媛,我還要一定要做這個(gè)事情（為什么我寫了這句話感覺到好邪惡?。?

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

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

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

GPU云服務(wù)器云服務(wù)器我做了一個(gè)小程序下載一個(gè)小程序做一個(gè)小程序

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111520.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

BLUE

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow2.4.0

閱讀 2435·2023-04-26 00:46
tensorflow函數(shù)

閱讀 598·2023-04-25 21:36
如何使用OPA實(shí)現(xiàn)多云策略和流程可移植性

閱讀 740·2021-11-24 10:19
#私藏項(xiàng)目實(shí)操分享# 什么是 SAP enhancement package

閱讀 2286·2021-11-23 09:51
hostxen，雙11，注冊(cè)贈(zèng)送20元代金券，充值多送25%，VPS可選中國香港/洛杉磯/日本/新加

閱讀 1031·2021-10-21 09:39
教你如何在低成本、有限的時(shí)間里策劃裂變100社群_怎么做微信防封群

閱讀 846·2021-09-22 10:02
賦值運(yùn)算符重載函數(shù)不加&為什么會(huì)出錯(cuò)？

閱讀 1680·2021-09-03 10:29
前端每日實(shí)戰(zhàn)：54# 視頻演示如何用純 CSS 創(chuàng)作一副國際象棋

閱讀 2717·2019-08-30 15:53

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

為了監(jiān)視快遞小哥，我做了一個(gè)小程序！

相關(guān)文章