我想制作一个可以实时移动的地图标记。每个地图标记由纬度和经度描述。这些坐标将由API提供，该public class PeerAppController {
private PeerApplication peer = new PeerApplication("1234");
private ObservableList<Contact> contacts;
private ChangeListener<Contact> listener;
private int i = 5;
@FXML
private JFXListView<Contact> contactList;
@FXML
private JFXButton addContactButton;
@FXML
private JFXTextArea messageTextArea;
@FXML
private GridPane chatGridPane;
@FXML
private JFXButton sendButton;
@FXML
public void initialize() {
initPeer();
initRootLayout();
contacts = FXCollections.observableArrayList(Contact.extractor());
contactList.setItems(contacts);
listener = new ChangeListener<Contact>() {
@Override
public void changed(ObservableValue<? extends Contact> observable, Contact oldValue, Contact newValue) {
chatGridPane.getChildren().clear();
List<Message> conversation = contacts.get(contactList.getSelectionModel().getSelectedIndex()).getConversation();
int i;
i = 0;
while (conversation.size() >= i + 1) {
Label messageLabel = new Label(conversation.get(i).getContent());
chatGridPane.addRow(i, messageLabel);
i++;
}
}
};
contactList.getSelectionModel().selectedItemProperty().addListener(listener);
i = 0;
}
private void initPeer() {
peer.init(EncryptionType.NONE, CompressionType.NONE);
peer.getPeerDaemonPlug().setComListener(new ICommunicationListener() {
@Override
public void onDataReceived(String s) {
Label labelMessage = new Label(s);
GridPane.setHalignment(labelMessage, HPos.RIGHT);
chatGridPane.addRow(getRowCount(chatGridPane) + 1, labelMessage);
contacts.get(contactList.getSelectionModel().getSelectedIndex()).getConversation().add(new Message(s, false));
}
@Override
public void onStreamPacketCompleted(OutputStream outputStream) {
}
});
}
private void initRootLayout() {
// Init the layout
ColumnConstraints c1 = new ColumnConstraints();
c1.setPercentWidth(100);
sendButton = new JFXButton();
contactList = new JFXListView<Contact>();
chatGridPane = new GridPane();
chatGridPane.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
chatGridPane.getColumnConstraints().add(c1);
}
@FXML
private void clickAddContact() {
TextInputDialog dialog = new TextInputDialog("");
dialog.setTitle("New Contact");
dialog.setHeaderText("Add a new contact");
dialog.setContentText("Enter the ID of your contact:");
Optional<String> result = dialog.showAndWait();
result.ifPresent(id -> {
Contact c = new Contact(id);
contacts.add(c);
System.out.println(contactList.getItems().size());
});
}
@FXML
private void clickSendMessage() {
// Not to be there
String message = messageTextArea.getText();
Label labelMessage = new Label(message);
try {
peer.sendRequest(sendDataToNode, new SendDataToNodeParam(contactList.getSelectionModel().getSelectedItem().toString(), message));
} catch (NoSuchAlgorithmException e) {
e.printStackTrace();
} catch (NoSuchPaddingException e) {
i = 0;
e.printStackTrace();
} catch (IllegalBlockSizeException e) {
i = 1;
e.printStackTrace();
} catch (InvalidAlgorithmParameterException e) {
i = 2;
e.printStackTrace();
} catch (InvalidKeyException e) {
i = 3;
e.printStackTrace();
} catch (BadPaddingException e) {
i = 4;
e.printStackTrace();
} catch (IOException e) {
i = 5;
e.printStackTrace();
}
messageTextArea.setText("");
GridPane.setHalignment(labelMessage, HPos.LEFT);
chatGridPane.addRow(getRowCount(chatGridPane) + 1, labelMessage);
contacts.get(contactList.getSelectionModel().getSelectedIndex()).getConversation().add(new Message(message, true));
System.out.println("i = " + i);
}
private int getRowCount(GridPane pane) {
int numRows = pane.getRowConstraints().size();
for (int i = 0; i < pane.getChildren().size(); i++) {
Node child = pane.getChildren().get(i);
if (child.isManaged()) {
Integer rowIndex = GridPane.getRowIndex(child);
if(rowIndex != null){
numRows = Math.max(numRows,rowIndex+1);
}
}
}
return numRows;
}
}
和public class Contact {
private StringProperty id;
private List<Message> conversation;
public Contact(String id) {
this.id = new SimpleStringProperty(id);
this.conversation = FXCollections.observableArrayList();
}
public static Callback<Contact, Observable[]> extractor() {
return new Callback<Contact, Observable[]>() {
@Override
public Observable[] call(Contact param) {
return new Observable[]{param.id};
}
};
}
@Override
public String toString() {
return String.format("%s", id.get());
}
public StringProperty getId() {
return this.id;
}
public void setId(StringProperty id) {
this.id = id;
}
public List<Message> getConversation() {
return this.conversation;
}
}
：
<AnchorPane prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="PeerAppController">
<children>
<SplitPane dividerPositions="0.29797979797979796" layoutX="200.0" layoutY="120.0" prefHeight="400.0" prefWidth="600.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<items>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0">
<children>
<JFXListView fx:id="contactList" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
<JFXButton fx:id="addContactButton" buttonType="RAISED" layoutX="133.0" layoutY="357.0" onAction="#clickAddContact" ripplerFill="#10ae07" text="+" textAlignment="CENTER" AnchorPane.bottomAnchor="14.0" AnchorPane.rightAnchor="14.0" />
</children>
</AnchorPane>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0">
<children>
<JFXTextArea fx:id="messageTextArea" focusColor="#40a85c" layoutX="15.0" layoutY="237.0" maxHeight="50.0" minHeight="10.0" prefHeight="50.0" prefWidth="339.0" AnchorPane.bottomAnchor="10.0" AnchorPane.leftAnchor="5.0" AnchorPane.rightAnchor="72.0" />
<ScrollPane layoutX="12.0" layoutY="12.0" prefHeight="276.0" prefWidth="394.0" AnchorPane.bottomAnchor="65.0" AnchorPane.leftAnchor="5.0" AnchorPane.rightAnchor="5.0" AnchorPane.topAnchor="5.0">
<content>
<GridPane fx:id="chatGridPane" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
</rowConstraints>
</GridPane>
</content></ScrollPane>
<JFXButton fx:id="sendButton" layoutX="350.0" layoutY="338.0" onAction="#clickSendMessage" prefHeight="50.0" prefWidth="64.0" ripplerFill="#18cd00" text="SEND" textAlignment="CENTER" textFill="#0dae04" AnchorPane.bottomAnchor="5.0" AnchorPane.leftAnchor="344.0" AnchorPane.rightAnchor="5.0" />
</children>
</AnchorPane>
</items>
</SplitPane>
</children>
</AnchorPane>
此端点以JSON格式返回一组user_id。
我的问题是我需要实时通信才能从该URL连续获取数据。
如何与Google地图一起实施实时通信？标记将随坐标移动？
答案 0 :(得分：1)
听起来您的/tracking/records/fetch端点已设置为轮询：您的网页可以重复从服务器获取一整套坐标，然后更新这些坐标的地图视图。要实现这一点，您需要从纯粹的轮询转移到推送。
首先，sign up for a Pusher account。然后让您的网页连接到您的Pusher应用程序并订阅新坐标的频道：
<script src="//js.pusher.com/4.0/pusher.min.js"></script>
<script>
var pusher = new Pusher('YOUR_APP_KEY', {
cluster: 'YOUR_APP_CLUSTER'
});
var tracking-records = pusher.subscribe('tracking-records-' + type + '-' + user_id); // Channel specific to this user
tracking-records.bind('new-tracking-record', function(data) {
console.log('A new tracking record with latitude', data.latitude, 'and longitude', data.longitude);
// Update your Google Map view here using data.latitude, data.longitude
});
</script>
然后在您的服务器上，确定创建跟踪记录的位置（可能是数据库插入）。此时，将新坐标发布到tracking-records频道。这是Node.js中的一个例子：
var Pusher = require('pusher');
var pusher = new Pusher({
appId: 'APP_ID',
key: 'APP_KEY',
secret: 'APP_SECRET',
cluster: 'APP_CLUSTER'
});
pusher.trigger(
'tracking-records-' + type + '-' + user_id, // The channel name
'new-tracking-record', // The event type
{latitude: 51, longitude: 3} // The coordinate data
);
有关更详细的示例，Pusher有关于how to track our pizza in realtime with Pusher and Google Maps的教程，另有关于how to build a realtime map using Laravel的教程。