设置标识位置

src/view/common/LocationCard.js

@@ -12,13 +12,13 @@ export default class LocationCard{
     * @param {JSX} info - jsx详细信息 
     * @param {String} src - 标记图标路径
    */
-    constructor(lat, lng, reader_id, locTime, card_id, info, src = "img/move.png"){
+    constructor(lat, lng, reader_id, locTime, card_id, info, src){
         this.lat = lat;
         this.lng = lng;
         this.reader_id = reader_id;
         this.locTime = locTime;
         this.card = card_id;
-        this.src = src;
+        this.src = src ? src : "img/move.png";
         this.info = info;
     }
 }

src/view/common/MoveableMarker.js

@@ -3,6 +3,19 @@ import { Marker, /*Popup, */Tooltip, withLeaflet } from "react-leaflet";
 import { Icon } from 'leaflet';
 
 class MoveableMarker extends Component{
+    createInfo(data){
+        let infos = [];
+        for (let i = 0; i < data.length; i++) { 
+            const element = data[i];
+            if(element !== ','){
+                infos.push(<span>{element}</span>);
+            }else{
+                infos.push(<br/>);
+            }
+        }
+        return infos;
+    }
+
     render(){
         return <>
             <Marker position={[this.props.data.lat, this.props.data.lng] } icon={new Icon({
@@ -12,15 +25,9 @@ class MoveableMarker extends Component{
                 iconAnchor: [10,10]
             })} name={`${this.props.data.reader_name}-${this.props.data.reader_id}`} key={this.props.key}>
                 {this.props.data.info &&
-                    <Tooltip
-                    // position=()
-                >
-                    {/* <span>{`卡号：${this.props.data.card} 与基站距离：${this.props.data.distance}米`}</span><br/>
-                    <span>{`经度：${this.props.data.lng} 纬度：${this.props.data.lat}`}</span><br/>
-                    <span>{`定位基站：${this.props.data.reader_name}-${this.props.data.reader_id}`}</span><br/>
-                    <span>{`定位时间：${this.props.data.locTime}`}</span> */}
-                    {this.props.data.info}
-                </Tooltip>
+                    <Tooltip>
+                        { this.createInfo(this.props.data.info) }
+                    </Tooltip>
                 }
                 {/* <Popup>
                     <span>{}</span>

src/view/utils/moveMarker.js

@@ -1,4 +1,6 @@
+import React from 'react';
 import PubSub from 'pubsub-js';
+import LocationCard from '../common/LocationCard';
 
 
 /** * 更新标记位置 * * 
@@ -6,6 +8,12 @@ import PubSub from 'pubsub-js';
 */
 export default function updateMarkerPos(data) {
   if (data.type === "card") {
-    PubSub.publish('body.data.update', data.data);
+    // let cards = data.data.map(card => {
+    //   return new LocationCard(...card);
+    // });
+    let cards = data.data.map(card => {
+      return new LocationCard(card.lat, card.lng, card.render_id, card.locTime, card.card_id, card.info, card.src);
+    });
+    PubSub.publish('body.data.update', cards);
   }
 }