javascript - 谷歌地图 HTMLMarker(循环不同位置)

Question

我有一个数组:

var data = new Array();                
data[0] = new Array();
data[0][0] = 'First_loc';
data[0][1] = '36.91781,36.63568';
data[1] = new Array();
data[1][0] = 'Second_loc';
data[1][1] = '36.88827,36.636908';

在我初始化 Google map 之后

var overlay;

function initialize() {
    var myLatLng = new google.maps.LatLng(36.88827, 36.636908);
    var mapOptions = {
        zoom: 9,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var gmap = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    for (var i = 0; i < data.length; i++) {
        var name_1 = data[i][0];
        var loc = data[i][1];

        function HTMLMarker() {

            this.pos = new google.maps.LatLng(loc);

        }


        HTMLMarker.prototype = new google.maps.OverlayView();
        HTMLMarker.prototype.onRemove = function () {}
        //init your html element here
        HTMLMarker.prototype.onAdd = function () {
            div = document.createElement('DIV');
            div.className = "htmlMarker";
            div.data = "data-price";
            div.innerHTML = '<a href="#' + name_1 + '" class="pin_on_map"></a>';
            var panes = this.getPanes();
            panes.overlayImage.appendChild(div);
        }

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

        //to use it
        var htmlMarker = new HTMLMarker(loc);

        htmlMarker.setMap(gmap);
    }
}

现在我正在循环函数(这并不好)我得到了最后一个值，所以我在 map 上有两个具有相同值的图钉。如果有人知道解决方案？所以在循环之后我会有不同的引脚和不同的值(位置和名称)

Answer 1

您需要将标记创建代码移动到一个函数中，而不是将其放在 for 的主体中环形。更改此代码:

    for (var i = 0; i < data.length; i++) {
        var name_1 = data[i][0];
        var loc = data[i][1];
        ...

到:

    for (var i = 0; i < data.length; i++) {
        addMarker( data[i] );
    }

    function addMarker( place ) {
        var name_1 = place[0];
        var loc = place[1];
        ...

原始代码的问题是只有一个 name_1 的副本和 loc所有标记之间共享的变量，以及当 HTMLMarker 中的异步代码时标记被调用——在循环终止很久之后——这些变量具有它们在最终循环迭代中的最后一个值。通过将该代码移动到一个函数中，您可以为每个循环迭代获得一个闭包，因此每个标记都有这些变量的单独副本。

此更改也恰好解决了代码中的一个细微问题:HTMLMarker函数是在 for 中定义的内部环形。这在 JavaScript 中实际上是不允许的，但是各种浏览器无论如何都接受它——并且不同的浏览器以不同的方式对待它。函数可以嵌套在其他函数中，但不能嵌套在循环或 if 中语句或类似的 block 。

此外，我没有仔细查看 HTMLMarker实现，但在循环内(或现在在 addMarker() 函数内)设置该构造函数和原型(prototype)并不理想。最好将它移到外面并将数据传递给构造函数。你对 LatLng 有问题构造函数 - 您向它传递一个字符串而不是两个数字。

您的标记 DIV 中没有任何实际文本，因此我将其更改为将名称放在标签内，并为它们添加了一些 CSS 样式，特别是 position:absolute .

还有一点编码注释:某些 HTMLMarker 中缺少分号方法。像这样的语句末尾应该有一个分号:

HTMLMarker.prototype.onRemove = function () {};

最后，您设置标记像素位置的方式是错误的。代码设置整个 overlayLayer Pane 的位置，而不是单个标记的位置。我还更改了第一个标记的纬度，以便在它们之间留出一点空间。

修复所有这些，代码如下所示:

var data = [
    [ 'First_loc', '36.95781,36.63568' ],
    [ 'Second_loc', '36.88827,36.636908' ]
];

function HTMLMarker( place ) {
    var latLngStrings = place[1].split(',');
    var lat = +latLngStrings[0];
    var lng = +latLngStrings[1];
    this.name = place[0];
    this.pos = new google.maps.LatLng( lat, lng );
}

HTMLMarker.prototype = new google.maps.OverlayView();

HTMLMarker.prototype.onRemove = function () {};

HTMLMarker.prototype.onAdd = function () {
    var div = this.div = document.createElement('DIV');
    div.className = "htmlMarker";
    div.data = "data-price";
    div.innerHTML = '<a href="#' + this.name + '" class="pin_on_map">' + this.name + '</a>';
    var panes = this.getPanes();
    panes.overlayImage.appendChild(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 - 30 + 'px';
    this.div.style.top = position.y - 48 + 'px';
};

function initialize() {
    var myLatLng = new google.maps.LatLng(36.88827, 36.636908);
    var mapOptions = {
        zoom: 9,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var gmap = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    for (var i = 0; i < data.length; i++) {
        addMarker( data[i] );
    }

    function addMarker( place ) {
        var htmlMarker = new HTMLMarker( place );
        htmlMarker.setMap(gmap);
    }
}

google.maps.event.addDomListener( window, 'load', initialize );

使用这个 CSS:

.htmlMarker {
    border: 1px solid #888;
    background-color: white;
    padding: 2px;
    font-size: 14px;
    position: absolute;
}

这是一个有效的 fiddle .