Question

使用谷歌地图api的v3，我看到了美国。我有标记设置在我的pg数据库中从2个地址查询转换为lat和lng的位置。我试图根据地址来自哪个查询结果来区分出现哪个标记图像。我已经基于这些查询成功创建了2个对象并且它们是单独记录的，但是，我无法使用这些对象的来源来确定显示哪些标记。

var labels = '';
var iconBase = 'green.png';
var iconBaseRed = 'red.png';

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {

if (xhr.readyState == 4) {
var arr = JSON.parse(xhr.responseText);
console.log(xhr.responseText);
if(Array.isArray(arr)){
showMarkers(arr);
}
}
}
xhr.open('GET', 'markers.php', true);
xhr.send();

function showMarkers(locations){
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
icon: iconBase,
label: labels[i % labels.length]
});
});

var markerCluster = new MarkerClusterer(map, markers,
        {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
  }


var xhrred = new XMLHttpRequest();
xhrred.onreadystatechange = function() {

if (xhrred.readyState == 4) {
var arrred = JSON.parse(xhrred.responseText);
console.log(xhrred.responseText);
if(Array.isArray(arrred)){
showMarkers(arrred);
}
}
}
xhrred.open('GET', 'markersred.php', true);
xhrred.send();


function showMarkers(locations){
var markersRed = locations.map(function(locationred, i) {
return new google.maps.Marker({
position: locationred,
icon: iconBaseRed,
label: labels[i % labels.length]
});
});

var markerClusterRed = new MarkerClusterer(map, markersRed,
        {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});

  }

我有为每个XMLHttpRequest设置单独变量的方法，这就是我能够创建多个JSON对象的方法。然后我尝试使用showMarker函数执行相同操作，但它不起作用。这就是我的问题......感谢任何帮助。

以下是测试的链接（请参阅控制台日志中的数据） www.rightmediasolutions.com/gs_chrome/testing.html

您会注意到它只显示iconBaseRed。

Answer 1

如果我理解正确，你正在进行两个不同的ajax调用，每个调用返回一个位置数组。现在，您希望显示不同的标记图标，具体取决于您从中绘制的ajax调用。

我将标记图标作为参数传递给函数：

function showMarkers(locations, theIcon){
    var markers = locations.map(function(location, i) {
        return new google.maps.Marker({
            position: location,
            icon: theIcon,
            label: labels[i % labels.length]
    });
});

然后让每个ajax结果调用showMarkers都有自己的图标：

showMarkers(arr, iconBase);
showMarkers(arrred, iconBaseRed);

尝试根据不同的数据库查询动态确定标记图像

1 个答案: