2015年11月18日 星期三

ParseReact實作(五)--query出10個最近的點,顯示在map上面

其實在第二篇我們就寫過,找出十個最近的點,利用的是parse query的near(),可是問題來了!我們現在輸入一個點就會更新一個點,所以TodoItem(存輸入地址的table)跟Taipei(存所有診所的table)不能同時運作,因為我們要等輸入的更新過後才能query他去找最近的點,我們上一篇看到observe()只有一次,可是又只能在裡面query

我現在基本的想法是,將結果的10個點組成array傳入Map.js,在Map.js中把addMarker()放在迴圈中,如此就可在同一地圖上畫出很多點。

我嘗試將死的點餵給他,(每次都先從最笨的開始哈哈哈哈)


出現的結果,點擊還能有文字內容


目前我的問題是,我將讀進來的點存到parse的table,並同時利用這個點去query.near(),找到10個點之後我將它存成一個2D array。

第一:我要怎麼通知TodoList我的array已經產生好了?console.log上面顯示的順序看來,每次還沒產生完新的object,Map的lat、lng就已經被render了啊!!!

第二:如果這樣的方法不可行,我就必須在observe()裡面就產生query,那query裡面可以傳參數嗎?例如:

new Parse.Query('Taipei').near("location",new Parse.GeoPoint( lastItem.lat, lastItem.lng))

結果:

雖然結果是不行,但是我覺得是因為看不懂lastItem是什麼,畢竟他是一個query,如果可以把輸入的點keep住,這個方法或許可行。

第三:以程式順序來說,observe()的query是最先執行的,然後再透過render去呼叫其他需被傳入的參數,可是!!!!為什麼明明在後面被呼叫的 ParseReact.Mutation.Create可以trigger到query?因為輸出的query是有增加新object的,這表示其實query不用更新嗎?只要mutation到他就會自己被更新嗎?


結合以上第二第三,我們將點定義為global變數,然後在query中使用它


定義一個新的nearbyItems來使用near(),並且在render的時候多一個nearbyItems的map來傳最近的十個點給Map,現在的問題是:
Map不能分開,我原來的想法是在lastItem傳兩個參數進去,在nearbyItems再傳兩個進去,這樣一來中心點跟需要被加上去的十個點可以分開處理,可是結果好像不行,有這樣的訊息

於是我把兩個呼叫Map的四個參數全部補滿
雖然可以了可是這麼做會有很多問題:
第一:會傳五次lat lng給map,可是新的紀錄會一直洗掉前一個,變成只出現一張地圖卻有10張空白地圖的位置,因為實際上我們只要傳一次lat lng就好了啊幹嘛傳10次

第二:LastGeoPoint完全沒有更改到,前面一開始的宣告只是為了可以去query near的點,但是接下來在lastItem內做overwrite的時候就沒辦法了,global變數完全不為所動,以至於接下來沒辦法去用LastGeoPoint

第三:map不能拆開,一次就要給他全部需要接收的參數,不能這邊給兩個下一次再給另外兩個,問題是就是要不同的query才能給

我真的是快被卡死了.................



2015年11月17日 星期二

ParseReact實作(四)--輸入地址就更新地圖

在上一篇我們指定死的座標給地圖成功之後,現在我們要動態去更改它的座標位置,當然第一步我們要先把Map.js中的程式碼全部都變成繼承TodoList.js傳入的參數,將原來的數字部分都改成this.prop.參數名稱。



再從TodoList.js去處理傳入的參數。
首先,第一個問題就是,我們是要從parse的table中取出資料,而不是在輸入的時候讀入資料,TodoList.js的結構是先query再render顯示
那observe()是哪裡來的?又是做什麼?
我們來看到ParseReact的document

https://github.com/ParsePlatform/ParseReact/tree/master/docs/api

在當中我們可以看到有細分許多,例如ParseReact.Mixin 還有 ParseReact.Mutation等等,看過之後我在Mixin中發現了observe(),意思就是說ParseReact中有一個Mixin的class中有一個observe function,追溯下去他的功能,我們在library中的Mixin.js中定義出observe()是一個query的必要function,傳入的參數是props跟state,也就是query起初的定義function,你要是不定義會有error message

'Components using ParseReact.Mixin must declare an observe() method.'

前提是!!!!這是export default class TodoList extends ParseComponent 才能用的喔,如果是一般的React .createclass是沒有這個function可以使用的。

在上面的程式碼可以看到我們將TodoItem這個加入條件後的query指給items,然後在render的地方使用this.data.items.map(function(i) show出所有的items,可是我只有一個地圖啊,我只能傳一次參數給map不然會show出超多map,要怎麼樣讓query只傳一個object給items呢?

沒錯!!!!利用parse的limit(數量),在這之前我們也試過用first(),可是first是一個需要回傳的function,我們其實只需要一個條件就夠了,沒辦法在裡面再加一個function,於是我們就在observe裡面放了兩個query~~~~一個給List show出來用,一個給Map的參數用。



然後在render的地方傳給他們


其實到這裡我還是有兩個問題:
第一:傳給map()的是object(也就是i),為什麼只要傳給他object就可以自動找出誰是lat誰是lng呢?
object log出來長這樣

第二:observe()是建立了query沒有錯,可是在哪裡執行?沒有query.find()也沒有query.first(),到底怎麼執行的?

但是還是成功了~~~~

耶嘿~~~~~~~~
請專業的大家幫我想一想到底答案是啥,我會萬分億分感謝您!!!!

2015年11月10日 星期二

ParseReact實作(三)--將gmap放入react.js中

想show出固定座標的gmap,但是show出這個component之前需要先initialize,所以我在TodoList中加入initial function 





出現這樣的訊息

Warning: getInitialState was defined on TodoList, a plain JavaScript class. This is only supported for classes created using React.createClass. Did you mean to define a state property instead?

由於TodoList為了要使用observe(),是經由extend ParseComponent的class
                                  

所以我想把initial的部分放到map裡面

先搞懂component的life cycle

Mounting (插入真實DOM節點)掛載流程

1.getInitialState():當物件被調用時此方法會在寫入 DOM 之前被觸發,通常用來管理狀態的元件可以用這個方法初始化資料。
2.componentWillMount:當元件內部的結構處理完畢準備寫入 DOM 之前觸發。
3.componentDidMount(DOMElement rootNode):當元件被寫入 DOM 之後觸發。當初始化需要操作 DOM 元素就可以用這個方法。

Updating 更新流程

1.componentWillReceiveProps(nextProps):已掛載的元件收到新的 props 時被觸發。在這個方法裡你通常會去比較 this.props 和 nextProps 然後再用 this.setState 去改變狀態。
2.shouldComponentUpdate(nextProps, nextState):這個函式需要回傳一個布林值,當元件判斷是否需要更新 DOM 時會被觸發。你可以在這個方法裡面去比較 this.props,this.state,nextProps,nextState 來決定是否需要更新,回傳 false 則會跳過此次觸發不更新,如果你什麼都不回傳預設會當做 false 。
3.componentWillUpdate:例如在上面 shouldComponentUpdate 你回傳了 true ,元件確定要更新了,在準備更新前這個方法會被觸發。
4.componentDidupdate(prevProps, prevState, rootNode):更新後觸發。


Unmounting 卸載流程

componentWillUnmount():當元件準備要被移除或破壞時觸發。
掛載後才能使用的方法

所以我把code改成這樣 




結果



這表示其實在todolist中,是有render到<Map/>這個class的,
我不信邪,把console log加入所有function中
果不其然

表示都有跑啊!!!gmap你到底死哪裡去啦
為什麼沒瓣法show出元件呢?救救我.........

11/16更新
找到答案了!!!!其實元件週期沒有錯,錯在於傳入gmap的時候就必須設定他的長跟寬。
這麼說好了,我們現在是在react裡面使用gmap.js去產生一個圖檔(地圖)然後傳給react的元件,去render他,使他出現在頁面上。
所以我們將render的部分改成



於是.........



出來了!!!!此刻我真的好想哭.........


其實會要發現這個小問題真的不容易,有時我常常debug一直會在自己的圈圈裡打轉,認為問題就是出在哪裡哪裡,卻總是忘記應該要從最底層開始,這次有主管的幫忙,我們從最底層的html開始改起,把map這個tag直接放在html裡面,在網頁上找到這個tag卻發現!這個map居然是1451*0!所以沒有設定他的長跟寬是永遠顯示不出來的!

大家要照步驟來喔~~~~~bug是很難找滴


引用:http://andyyou.logdown.com/tags/ReactJS