マージする列挙型オブジェクト
const marker = {
id: 1,
iconPath: img,
width: 50,
height: 50,
joinCluster: true, // 指定了该参数才会参与聚合
label: {
width: 50,
height: 30,
borderWidth: 1,
borderRadius: 10,
bgColor: '#ffffff'
}
};
const positions = [{
latitude: 35.040266,
longitude: 118.351174,
}, {
latitude: 35.05151,
longitude: 118.34787,
}, {
latitude: 35.042009,
longitude: 118.356077,
}, {
latitude: 35.037898,
longitude: 118.350418,
}]
実装されたコード
const markers = []
positions.forEach((p, i) => {
const newMarker = Object.assign({
}, marker, p)
newMarker.id = i + 1
newMarker.label.content = i + 1
markers.push(newMarker)
})
マーカーの印刷の戻り結果が予期したものと異なります。同じキー値 ID は深いコピーであり、label.content は浅いコピーです。
コードを次のように変更します。
const markers = []
positions.forEach((p, i) => {
const newMarker = Object.assign({
}, marker, p)
newMarker.id = i + 1
newMarker.label.content = `label ${
i + 1}`
var newMarkers = JSON.parse(JSON.stringify(newMarker))
markers.push(newMarkers)
})
要約:
Object.assign がオブジェクトをマージするとき、最初のレイヤーは深いコピーで、2 番目のレイヤーは浅いコピーです。newMarker.label.content の浅いコピーは、参照される marker.label として理解できます。 newMarker.label.content も
それに応じて変更されるため、4 つのコンテンツが得られます: 4 保存を押す前に、newMarker のディープ コピーを作成するだけです。