添加多个gmap标记

Question

我有一个显示地图的vue2谷歌地图应用程序。

在此之前，我使用这个代码

<GmapMarker
ref="myMarker"
:position="google && new google.maps.LatLng(1.38, 103.8)"
/>
<GmapMarker
ref="myMarker"
:position="google && new google.maps.LatLng(3.1488976, 101.6126774)"
/>

显示多个标记，但如果latlng数据太多，则需要创建许多标记。

我的想法是从中获取数据

const latlng = [
{
lat: value,
lng: value,
},
{
lat: value,
lng: value,
},

并将CCD_ 1应用于CCD_

但我有问题把这个{拉廷}}应用到标记中。有人能解释一下如何应用它们吗？

Answer 1

为了生成多个标记，您需要在标记集合中推送纬度和经度，然后迭代标记。我已经根据要求更新了代码。

<template>
<div>
<GmapMap
ref="gmap"
:center="getCenter()"
:zoom="11"
style="height: 500px;margin: 0px -8px;"
class="no-padding"
:options="getOptions()"
>
<GmapMarker
:key="index"
v-for="(m, index) in getMarkers()"
:position="m.position"
:clickable="true"
:draggable="false"
:title="m.title"
:icon="m.icon"
@click="clicked()"
/>
</GmapMap>
</div>
</template>
<script>
import MarkerClusterer from "marker-clusterer-plus";
export default {
name: "SiteMap",
props: [],
methods: {   
getOptions() {
return {
zoomControl: true,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
rotateControl: false,
fullscreenControl: false,
disableDefaultUi: false
};
},
clicked() {
// after click
},
getCenter() {     
return {
lat: 37.12523,
lng: -122.1252
};
},
getMarkers() {
// generating markers for site map
var markers = [];
// remove this after lat long received from api.
const tempLatLong = [
{ lat: 37.9068361, lng: -122.116971 },
{ lat: 37.9168362, lng: -122.076972 },
{ lat: 37.9268363, lng: -122.136973 },
{ lat: 37.9368364, lng: -122.146974 },
{ lat: 37.9468365, lng: -122.106975 },
{ lat: 37.9568366, lng: -122.166976 },
{ lat: 37.9668367, lng: -122.176977 },
{ lat: 37.9768368, lng: -122.016978 },
{ lat: 37.9868369, lng: -122.196979 }
];
for(let i=0;i<tempLatLong.length;i++){
markers.push({
position: tempLatLong[i],
title: 'test title',
icon: this.getSiteIcon(1)    // if you want to show different as per the condition.         
});
}
return markers;      
},
getSiteIcon(status) {
try {
switch (status) {
case 1:
return require("@/assets/images/icons/map-marker-online.svg");
break;
case 2:
return require("@/assets/images/icons/map-marker-critical.svg");
break;
case 3:
return require("@/assets/images/icons/map-marker-offline.svg");
break;
case 4:
return require("@/assets/images/icons/map-marker-lifesafety.svg");
break;
default:
return require("@/assets/images/icons/map-marker-online.svg");
}
} catch (e) {
return null;
}
},
},
components: {},
created() {},
mounted() {
}
};
</script>
<style scoped></style>