Javascript 在Vuejs中使用Google地图标记群集

我正在Vuejs上构建一个小应用程序，在这里我使用了一个替代程序，在我从API获得响应后尝试加载映射，下面是我的代码：

var MarkerClusterer = require('node-js-marker-clusterer');
let rawMarkers=[];
let rawMarkers2=[];
$.each(response.data.data, function( key, value) {
    if((value.latitude != null) && (value.longitude != null) )
    {
        rawMarkers.push({
            name:value.name,
            lat:parseFloat(value.latitude),
            long:parseFloat(value.longitude),
            // conAr:value.technical_description.construction_area,
        });
    }
});
// console.log( rawMarkers);
// console.log( rawMarkers.map(obj => Object.values(obj)));

rawMarkers2=rawMarkers.map(obj => Object.values(obj));
let markers =rawMarkers2;

let displayDetails=[];
$.each(response.data.data, function( key, value) {
    let det='<div class="info_content">' +
        // '<h3>'+value.name+'</h3>' +
        '<a href="/#/projectprofile/'+value.slug+'" target="_blank">'+value.name+'</a>'+
        '</div>';
    displayDetails.push({
        det:det,
    });
    det='';
});
// console.log( displayDetails.map(obj => Object.values(obj)));
let infoWindowContent =displayDetails.map(obj => Object.values(obj));

if (this.mapState.initMap) { // map is already ready
    /*console.log("from mounted :"+this.mapState.initMap);
    alert("from mounted :"+this.mapState.initMap);*/


    let bounds = new google.maps.LatLngBounds();

    let map = new google.maps.Map(document.getElementById('map'), {
        zoom: 4,
        center: {lat: 21.7679, lng: 78.8718},
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    let labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';


    let markerBg = {
        url: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
        // This marker is 20 pixels wide by 32 pixels high.
        size: new google.maps.Size(80, 30),
        // The origin for this image is (0, 0).
        origin: new google.maps.Point(0, 0),
        // The anchor for this image is the base of the flagpole at (0, 32).
        anchor: new google.maps.Point(0, 32)
    };

    // Info Window Content
    // console.log(infoWindowContent);

    // Display multiple markers on a map
    let infoWindow = new google.maps.InfoWindow(), marker, i;

    // Loop through our array of markers & place each one on the map
    for( i = 0; i < markers.length; i++ ) {
        let position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            label: markers[i][3],
            title: markers[i][0],
            animation: google.maps.Animation.DROP,
            icon: markerBg,
        });

        //Marker Cluster operation
        var mcOptions = {
            //imagePath: 'https://googlemaps.github.io/js-marker-clusterer/images/m',
            styles:[{

                url: "https://googlemaps.github.io/js-marker-clusterer/images/m1.png",
                width: 53,
                height:53,
                fontFamily:"comic sans ms",
                textSize:15,
                textColor:"red",
                //color: #00FF00,
            }]

        };
        var mc = new MarkerClusterer(map, marker, mcOptions);

        // Allow each marker to have an info window
        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));

        // Automatically center the map fitting all markers on the screen
        map.fitBounds(bounds);
    }
}

var-MarkerClusterer=require（'node-js-marker-cluster'）；
设rawMarkers=[]；
设rawMarkers2=[]；
$.each（response.data.data，函数（键，值）{
如果（（value.latitude！=null）和&（value.latitude！=null））
{
推({
name:value.name，
lat:parseFloat（值。纬度），
long:parseFloat（value.longitude），
//conAr：价值、技术、说明、施工、区域、，
});
}
});
//控制台日志（RAWMERKS）；
//log（rawmarks.map（obj=>Object.values（obj））；
rawMarkers2=rawmarks.map（obj=>Object.values（obj））；
设markers=rawMarkers2；
让displayDetails=[]；
$.each（response.data.data，函数（键，值）{
设det=''+
//''+值。名称+''值+
''+
'';
displayDetails.push({
det:det，
});
det=''；
});
//log（displayDetails.map（obj=>Object.values（obj））；
让infoWindowContent=displayDetails.map（obj=>Object.values（obj））；
如果（this.mapState.initMap）{//map已经就绪
/*log（“从装载：+this.mapState.initMap”）；
警报（“从装载：+this.mapState.initMap”）*/
让bounds=new google.maps.LatLngBounds（）；
让map=new google.maps.map（document.getElementById（'map'）{
缩放：4，
中心：{lat:21.7679，lng:78.8718}，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
let labels='abcdefghijklmnopqrstuvxyz'；
设markerBg={
网址：'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
//此标记宽20像素，高32像素。
尺寸：新谷歌地图尺寸（80,30），
//此图像的原点是（0，0）。
来源：新google.maps.Point（0,0），
//此图像的锚定位于（0,32）处旗杆的底部。
主播：新google.maps.Point（0,32）
};
//信息窗口内容
//console.log（infoWindowContent）；
//在地图上显示多个标记
让infoWindow=new google.maps.infoWindow（），marker，i；
//在我们的标记阵列中循环并将每个标记放置在地图上
对于（i=0；i

但这张地图是这样显示的：

我希望图像应如下所示：

我从中获得代码引用

---

帮我实现这个目标。谢谢

您正在为所有标记创建一个

MarkerCluster

，而是将所有标记存储在数组中，只需创建一个

MarkerCluster

，如随附的问题链接所示

var gMarkers = [];
for( i = 0; i < markers.length; i++ ) 
{
    // add markers on the map
    ....

    // attach event handlers
    ....

    gMarkers.push(marker);
}
var mc = new MarkerClusterer(map, gMarkers , mcOptions);

var-gMarkers=[]；
对于（i=0；i

这起作用了，在您的回答中，我们需要有一个不同的

变量

名称，因为它不会在

for loop

中输入。未了解现有标记数组，已修复它！