地图标记不显示（JavaScript / Google Maps API V3） [英] Map Markers Not Displaying (JavaScript/Google Maps API V3)

问题描述

我无法使用Google Maps API v3获取地图标记。我试图让他们都在一个单一的数组，以使显示大量相对简单。目前，地图加载正常，但引发错误 Uncaught TypeError：Object＃< Object>尝试绘制标记时没有方法setValues。这个错误会在 setTimeout（）运行的每次迭代中重复。任何建议将不胜感激。

I'm having trouble getting map markers to display using Google Maps API v3. I'm attempting to keep them all in a single array, to make displaying a large amount relatively simple. Currently, the map loads fine, but throws the error Uncaught TypeError: Object #<Object> has no method 'setValues' when attempting to draw the markers. The error repeats with each iteration run by the setTimeout(). Any recommendations will be greatly appreciated.

这是使用的JavaScript：

This is the JavaScript used:

var map;
var markers = [
    [
        45.768366,
        -108.5975760,
        'Fitness 19'
    ],
    [
        45.785684,
        -108.6144625,
        'Granite Fitness'
    ],
      ... (more, syntactically correct)
    [
        45.7920092,
        -108.4886232,
        'Steepworld'
    ]
];
function mapinit() {
    var conf = {
        zoom: 11,
        center: new google.maps.LatLng(45.7832856,-108.5006904),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById('mapcont'),conf);
    for(i in markers) {
        window.setTimeout('mark('+i+')',i*200);
    }
}
function mark(i){
    google.maps.Marker({
        position: google.maps.LatLng(markers[i][0],markers[i][1]),
        animation: google.maps.Animation.DROP,
        title: markers[i][2]
    });
}

推荐答案

好的，在Chrome的JavaScript控制台中搞乱了（我喜欢那件事），我能够完美地运行它。我重写了 mapinit（）和 mark（）函数：

Okay, after quite a bit of messing around in Chrome's JavaScript console (I love that thing), I was able to get it working perfectly. I rewrote the mapinit() and mark() functions to this:

function mapinit() {
    var conf = {
        zoom: 11,
        center: new google.maps.LatLng(45.7832856,-108.5006904),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById('mapcont'),conf);
    for(i in markers) {
        markers[i][3] = new google.maps.LatLng(markers[i][0],markers[i][1]);
        window.setTimeout('mark('+i+')',i*200);
    }
}
function mark(i){
    new google.maps.Marker({
        position: markers[i][3],
        animation: google.maps.Animation.DROP,
        map: map,
        title: markers[i][2]
    });
}

这里的主要区别在于位置 code>标记的变量似乎需要在外部变量中出于某种原因初始化，所以当我循环标记数组时，我生成一个 google.maps.LatLng 作为每个标记的第四项。然后在 mark（）函数中引用它，并且标记显示成功。 setTimeout 用于错开标记的显示效果，特别是在脚本和地图加载速度更快的快速连接中。

The main difference here is that the position variable of the marker seems to require being initialized in an outside variable for some reason, so when I loop through the markers array, I generate a google.maps.LatLng as the fourth item for each marker. This is then referenced within the mark() function, and the marker displays successfully. The setTimeout for staggering the display of the markers works wonderfully, especially on faster connections where the scripts and map load quickly.

在我的inClass网站上查看最终结果

View the end result on my inClass site

这篇关于地图标记不显示（JavaScript / Google Maps API V3）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！