Question

我对帖子How to Populate a Google Map with HTML markers (Overlay) using data attributes from DOM elements提出了跟进问题。

这是我的小提琴：https://jsfiddle.net/vz9pda8v/ 更新请查看我的回答＆＃39;对于这个小提琴中的代码。

在小提琴中我设置了它，以便有两个按钮：

第一个设置为删除用于通过数据属性填充地图的DOM项目
第二个应该重新加载标记（我以http://jsfiddle.net/upsidown/p646xmcr/为基础）

我的问题

我用来重新加载标记的功能reloadMarkers()似乎无法正常工作。我不确定我从DOM元素创建的数组是否正确创建，或者setMap()位是否重新运行每次我尝试从初始标记重新加载标记数组而不是更新的数组。

我的JS：

$( "#removeFirst" ).click(function() {
    $('.first').remove();
    console.log('removed first item');
});

function HTMLMarker(lat, lng, text) {
    this.lat = lat;
    this.lng = lng;
    this.pos = new google.maps.LatLng(lat, lng);
    this.text = text;
}

HTMLMarker.prototype = new google.maps.OverlayView();
HTMLMarker.prototype.onRemove = function() {}

//init your html element here
HTMLMarker.prototype.onAdd = function() {
    var div = document.createElement('DIV');
    div.style.position = 'absolute';
    div.className = "htmlMarker";
    div.innerHTML = this.text;
    var panes = this.getPanes();
    panes.overlayImage.appendChild(div);
    this.div = div;
}

HTMLMarker.prototype.draw = function() {
    var overlayProjection = this.getProjection();
    var position = overlayProjection.fromLatLngToDivPixel(this.pos);
    var panes = this.getPanes();
    this.div.style.left = position.x + 'px';
    this.div.style.top = position.y - 10 + 'px';
}

// Make Plot Points From Results DOM Elements
function makeMapPlotPoints() {

    // Set marker from results list and create empty plot point array
    var mapPlotPointDOM = $(".listing-item");
    var mapPlotPointArr = [];

    $(mapPlotPointDOM).each(function() {
        if ($(this).data("marker-lat") !== '') {
            mapPlotPointArr.push([
                $(this).data("marker-id"),
                $(this).data("marker-lat"),
                $(this).data("marker-lng"),
            ]);
        }
    });
    setMarkers(mapPlotPointArr);
};

var map;
var markers = []; // Create a marker array to hold markers

//create empty LatLngBounds object
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
var center = {
    lat: 0,
    lng: 0
};

var overlay;

function setMarkers(locations) {

    for (var i = 0; i < locations.length; i++) {

        var mapMarkerItem = locations[i];
        var myLatLng = new google.maps.LatLng(mapMarkerItem[1], mapMarkerItem[2]);

        //to use it
        var htmlMarker = new HTMLMarker(mapMarkerItem[1], mapMarkerItem[2], mapMarkerItem[0]);
        htmlMarker.setMap(map);

        // Set Map Bounds to Auto-center
        bounds.extend(myLatLng);
        map.fitBounds(bounds);

        // Push marker to markers array
        //markers.push(marker);
        markers.push(htmlMarker);
    }
}

function reloadMarkers(locations) {

    // Call set markers to re-add markers
    console.log(markers) // Markers after reload
    console.log('Count DOM items before:'+ markers.length); // Markers count after reload


    // Loop through markers and set map to null for each
    for (var i = 0; i < markers.length; i++) {

        markers[i].setMap(null);
    }

    // Reset the markers array
    markers = [];


    console.log(markers) // Markers after reload
    console.log('Count DOM items after:'+ markers.length); // Markers count after reload

    // #### NOTE #### This is where I'm getting hung up

    // Call set markers to re-add markers
    setMarkers(locations);
    makeMapPlotPoints();
}

function initializeMap() {

    var mapOptions = {
        zoom: 2,
        maxZoom: 18,
        minZoom: 2,
        center: new google.maps.LatLng(0, -30),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    }

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    makeMapPlotPoints();
    document.getElementById('reloadMarkers').addEventListener('click', reloadMarkers);

}

initializeMap();

提前非常感谢！

Answer 1

好的，所以我不认为这将是一个最终的，完全正确的答案。但是，我已经设法弄清楚每次重新加载标记时，都会重新添加预先存在的标记（不知道为什么）。

在调用生成标记的函数（在绘制标记的函数内）之前，通过对映射中的所有html标记使用.remove()，我可以暂时解决这个问题。

我的小提琴：https://jsfiddle.net/vz9pda8v/

代码：

$( "#removeFirst" ).click(function() {
    $('.first').remove();
    console.log('removed first item');
});

function HTMLMarker(lat, lng, text) {
    this.lat = lat;
    this.lng = lng;
    this.pos = new google.maps.LatLng(lat, lng);
    this.text = text;
}

HTMLMarker.prototype = new google.maps.OverlayView();
HTMLMarker.prototype.onRemove = function() {}

//init your html element here
HTMLMarker.prototype.onAdd = function() {
    var div = document.createElement('DIV');
    div.style.position = 'absolute';
    div.className = "htmlMarker";
    div.innerHTML = this.text;
    var panes = this.getPanes();
    panes.overlayImage.appendChild(div);
    this.div = div;
}

HTMLMarker.prototype.draw = function() {
    var overlayProjection = this.getProjection();
    var position = overlayProjection.fromLatLngToDivPixel(this.pos);
    var panes = this.getPanes();
    this.div.style.left = position.x + 'px';
    this.div.style.top = position.y - 10 + 'px';
}

// Make Plot Points From Results DOM Elements
function makeMapPlotPoints() {

    // Set marker from results list and create empty plot point array
    var mapPlotPointDOM = $(".listing-item");
    var mapPlotPointArr = [];

    $(mapPlotPointDOM).each(function() {
        if ($(this).data("marker-lat") !== '') {
            mapPlotPointArr.push([
                $(this).data("marker-id"),
                $(this).data("marker-lat"),
                $(this).data("marker-lng"),
            ]);
        }
    });
    setMarkers(mapPlotPointArr);
};

var map;
var markers = []; // Create a marker array to hold markers

//create empty LatLngBounds object
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
var center = {
    lat: 0,
    lng: 0
};

var overlay;

function setMarkers(locations) {

    for (var i = 0; i < locations.length; i++) {

        var mapMarkerItem = locations[i];
        var myLatLng = new google.maps.LatLng(mapMarkerItem[1], mapMarkerItem[2]);

        //to use it
        var htmlMarker = new HTMLMarker(mapMarkerItem[1], mapMarkerItem[2], mapMarkerItem[0]);
        htmlMarker.setMap(map);

        // Set Map Bounds to Auto-center
        bounds.extend(myLatLng);
        map.fitBounds(bounds);

        // Push marker to markers array
        //markers.push(marker);
        markers.push(htmlMarker);
    }
}

function reloadMarkers(locations) {
$('#map-canvas .htmlMarker').remove();
    makeMapPlotPoints();
}

function initializeMap() {

    var mapOptions = {
        zoom: 2,
        maxZoom: 18,
        minZoom: 2,
        center: new google.maps.LatLng(0, -30),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    }

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    makeMapPlotPoints();
    document.getElementById('reloadMarkers').addEventListener('click', reloadMarkers);

}

initializeMap();

很想知道其他人是否有更好的解决方案，并提前致谢！

Google地图从包含数据属性的Dom项列表中重新加载HTML标记

1 个答案: