11

我正在尝试使用 API 将自定义控件添加到 Google 地图。我已经添加了两个自定义控件，它们工作得很好。我试图复制并粘贴第三个控件的代码（当然是更改相关变量），但我不断收到上述错误（在标题中）。

Chrome 控制台和 Firebug 似乎没有指出特定问题（它在谷歌地图 api 代码中中断）。通过逐步注释掉行，我将其缩小到这一特定行：

map.controls[google.maps.ControlPosition.TOP_RIGHT].push(churchControlDiv);

添加控件的完整代码如下：

function ChurchControl(churchControlDiv, map) {
churchControlDiv.style.padding = '5px 0px';
var churchControlUI = document.createElement('DIV');
churchControlUI.style.backgroundColor = 'white';
churchControlUI.style.borderStyle = 'solid';
churchControlUI.style.borderWidth = '1px';
churchControlUI.style.borderColor = 'gray';
churchControlUI.style.boxShadow = 'rgba(0, 0, 0, 0.398438) 0px 2px 4px';
churchControlUI.style.cursor = 'pointer';
churchControlUI.style.textAlign = 'center';
churchControlUI.title = 'Click to see Churches';
churchControlDiv.appendChild(churchControlUI);
var churchControlText = document.createElement('DIV');
churchControlText.style.fontFamily = 'Arial,sans-serif';
churchControlText.style.fontSize = '13px';
churchControlText.style.padding = '1px 6px';
churchControlText.style.fontWeight = 'bold';
churchControlText.innerHTML = 'Churches<br>แสดงจำนวนคริสเตียน';
churchControlUI.appendChild(churchControlText);

google.maps.event.addDomListener(churchControlUI, 'click', function() {
    toggle(churches);
    if (churchControlText.style.fontWeight == 'bold') {
        churchControlText.style.fontWeight = 'normal';
    } else {
        churchControlText.style.fontWeight = 'bold';
    }
});

google.maps.event.addDomListener(churchControlUI, 'mouseover', function() {
    churchControlUI.style.backgroundColor = '#e8e8e8';
});

google.maps.event.addDomListener(churchControlUI, 'mouseout', function() {
    churchControlUI.style.backgroundColor = 'white';
});
}

function initialize(){
    map = new google.maps.Map(document.getElementById("map_canvas"), {
    center: centerLatLng,
    zoom: 7,
    streetViewControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var churchControlDiv = document.createElement('DIV');
    var churchControlDiv = new ChurchControl(churchControlDiv, map);
    churchControlDiv.index = 3;
    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(churchControlDiv);
}

有任何想法吗？为什么有 3 个控件会成为问题？

4

3 回答 3

12

由于不同的原因，在遵循本教程时，我的控制台上弹出了相同的错误。

我没有使用默认的 javascript DOM 操作，而是使用 jQuery 创建我的元素，例如

    var controlDiv = $('<div></div>');
    var controlUI = $('<div class="alert alert-info"></div>');
    controlDiv.append(controlUI);
    var controlText = $('<div>Control text here</div>');
    controlUI.append(controlText);

这样做很好，只要您在最后使用or将 DOM 节点（而不是 jQuery 元素！）提供给地图，如下所示：controlUI[0]controlUI.get(0)

    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv[0]);

另请参阅：
如何从 jQuery 对象获取本机 DOM 元素 - jQuery 常见问题解答

于 2013-04-26T10:41:41.160 回答
2

我遵循了教程，它与您的代码非常接近。

接近尾端的这条线需要改变

var churchControlDiv = new ChurchControl(churchControlDiv, map);

替换churchControlDiv为churchControl或其他名称，因为 ChurchControlDiv 不应被覆盖。

见这里http://jsfiddle.net/FTjnE/2/

我用//CHANGED点击提醒和新地图中心标记了我的更改

于 2012-04-20T13:59:35.000 回答
0

此问题的一般根本原因似乎是元素或其属性被删除或以其他方式不存在。Maps API 正在尝试zIndex在style属性中查找 。

我在与 Maps API 控件交互的 Vue 应用程序自定义组件中遇到了这个问题。我们通过在组件的拆卸中更加谨慎地解决了这个问题。

基本上你需要确保你没有向控件添加一个空元素，并且在删除它之前不要使元素或其属性为空，方法是用 v-if 做一些时髦的事情。

于 2020-03-26T22:04:26.643 回答