为xml生成的每个标记创建复选框GOOGLE MAPS

-1

我已经有了一个工作映射，它可以生成一个有效的xml，并可以在我的地图上生成一个标记。现在我想要做的是为xml中的每个循环生成映射，我可以异步创建每个名称的复选框。这里是生成的XML为xml生成的每个标记创建复选框GOOGLE MAPS

function searchNearLocations(radius){ 
clearLocations(); 

var searchUrl = './designIncludes/phpLogicIncludes/searchMarkers.php?lat=' + userLat +'&lng=' + userLng + '&radius=' + radius; 
downloadUrl(searchUrl, function(data) { 
    var xml = parseXml(data); 
    var markerNodes = xml.documentElement.getElementsByTagName("marker"); 
    var bounds = new google.maps.LatLngBounds(); 
    for (var i = 0; i < markerNodes.length; i++) { 
    var name = markerNodes[i].getAttribute("name"); 
    var address = markerNodes[i].getAttribute("address"); 
    var info = markerNodes[i].getAttribute("info"); 
    var tts = markerNodes[i].getAttribute("tts"); 
    var latlng = new google.maps.LatLng(
      parseFloat(markerNodes[i].getAttribute("lat")), 
      parseFloat(markerNodes[i].getAttribute("lng"))); 

    createMarker(latlng, name, address,info,tts); 
    createCheckboxes(name); 
    bounds.extend(latlng); 
    } 
    map.fitBounds(bounds); 
    });  
}

我createMarker（）

function createMarker(latlng, name, address,info,tts) { 
    var html = "<b>" + name + "</b></br><u>" + address + "</u></br>" + info + "</br>" + "Time allowance to spend: " + tts; 
    var marker = new google.maps.Marker({ 
    map: map, 
    position: latlng 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
    infoWindow.setContent(html); 
    infoWindow.open(map, marker); 
    }); 
    markers.push(marker); 
}

我不在JavaScript，良好的代码，但我有一个标记物= []数组的全局变量。我可以使用该变量生成一个复选框吗？顺便说一下，在调用searchNearLocations函数之前，我也有一个预先制作好的标记，我想将它添加到latng边界。是否有可能将其插入循环？

来源

2015-01-09 Jei Shii Deiji

是的，你可以;没问题。你能显示createMarker（）吗？这就是有趣的行动。 –

完成编辑我已经添加了createMarker –

好吧

一切都不需要做的复选框，我忽略了。你必须把它放回你的代码中。我写了一个正常的例子，你可以照原样复制/粘贴。

<script src="http://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
<script type="text/javascript"> 
var markers = []; 
var map; 

/* I don't have that XML. I'll just insert a few locations hard coded. You can ignore this; it doesn't affect your question */ 
var markerNodes = [ 
    {latlng: new google.maps.LatLng(50.896328544032805,4.4825010816688), name: 'Brussels Airport', address: 'A201, 1930 Zaventem', info: 'National airport of Brussels', tts: 'foo'}, 
    {latlng: new google.maps.LatLng(50.8957080950929,4.334064952575659), name: 'Football stadion', address: 'Marathonlaan', info: 'Football stadion of the Red Devils', tts: 'foo'}, 
    {latlng: new google.maps.LatLng(50.82302545625156,4.39255052014533), name: 'VUB campus', address: 'Pleinlaan 2', info: 'University of Brussels', tts: 'foo'} 
]; 

function initialize() { 
    var position = new google.maps.LatLng(50.84499325563654,4.349978498661017); 
    var myOptions = { 
    zoom: 11, 
    center: position 
    }; 
    map = new google.maps.Map(document.getElementById("map-canvas"), myOptions); 
    searchNearLocations(null); // I ignore the radius part. I presume this searches for locations in a DB, or something... 
} 

/* never mind most of the changes I made here, it's just to ignore the xml part of the code */ 
function searchNearLocations(radius) { 
    clearLocations(); 
    var bounds = new google.maps.LatLngBounds(); 
    for (var i=0; i<markerNodes.length; i++) { 
    var latlng = markerNodes[i].latlng, 
     name = markerNodes[i].name, 
     address = markerNodes[i].address, 
     info = markerNodes[i].info, 
     tts = markerNodes[i].tts; 
    createMarker(latlng, name, address, info, tts); 
    createCheckbox(name, i); // the most important thing is to pass the i; then markers[i] corresponds with checkboxes[i] 
    bounds.extend(latlng); 
    } 
    map.fitBounds(bounds); 
} 

function createMarker(latlng, name, address, info, tts) { 
    // var html = "<b>" + name + "</b></br><u>" + address + "</u></br>" + info + "</br>" + "Time allowance to spend: " + tts; 
    var marker = new google.maps.Marker({ 
    map: map, 
    title: name,  // You should add this 
    position: latlng 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
    /* I'll ignore the infoWindow */ 
    }); 
    markers.push(marker); 
} 
function clearLocations() { 
    for (var i=0; i<markers.length; i++) { 
    markers[i].setMap(null); 
    } 
    markers=[]; 
} 
function checkboxChanged(i, checked) { 
    if(checked) { 
    markers[i].setMap(map); 
    } 
    else { 
    markers[i].setMap(null); 
    } 
} 
function createCheckbox(name, i) { 
    document.getElementById('checkboxes').innerHTML += 
    '<input type="checkbox" checked="checked" onclick="checkboxChanged(' + i + ', this.checked);"> ' + name + '<br>'; 
} 
google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
<style> 
#map-canvas { 
    width: 500px; 
    height: 400px; 
} 
</style> 
<div id="map-canvas"></div> 
<div id="checkboxes"></div>

你可以设法在代码中包含这个吗？

编辑：这里是一个数据库中的位置的例子;我绕过XML并通过JSON进行通信。它给你（种）你的问题的组合; 我的数据库有不同的表格，但这不应该是个问题。我添加了jQuery，仅用于ajax。

CREATE TABLE IF NOT EXISTS stations (
    id bigint(15) NOT NULL AUTO_INCREMENT, 
    lat decimal(12,10) DEFAULT NULL, 
    lng decimal(12,10) DEFAULT NULL, 
    name varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL, 
    PRIMARY KEY (id) 
) ENGINE=InnoDB DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci; 
INSERT INTO stations (id, lat, lng, name) VALUES 
(1, '50.8456035000', '4.3568658000', 'Brussel-Centraal'), 
(2, '50.8413140000', '4.3490830000', 'Brussel-Kapellekerk'), 
(3, '50.8517507000', '4.3623635000', 'Brussel-Congres'), 
(4, '50.8604931000', '4.3607035000', 'Brussel-Noord'), 
(5, '50.8348278000', '4.3365303000', 'Brussel-Zuid');

的index.php

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="http://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
<script type="text/javascript"> 
var markers = []; 
var map; 

// settings, to pass to the DB 
var lat = 50.84499325563654; 
var lng = 4.349978498661017; 
var radius = 1.5; /* set this to more than 1.5 to see more locations */ 

function initialize() { 
    var position = new google.maps.LatLng(50.84499325563654, 4.349978498661017); 
    var myOptions = { 
    zoom: 11, 
    center: position 
    }; 
    map = new google.maps.Map(document.getElementById("map-canvas"), myOptions); 
    searchNearLocations(lat, lng, radius); 
} 

function searchNearLocations(lat, lng, radius) { 
    document.getElementById('checkboxes').innerHTML = ''; 
    // we start an Ajax call. 
    $.ajax({ 
    url: 'ajax.php', 
    data: {lat: lat, lng: lng, radius: radius}, 
    dataType: 'json', 
    success: function(data) { 
     // the request has returned data. Now we can proceed 
     clearLocations(); 
     var bounds = new google.maps.LatLngBounds(); 
     for (var i=0; i<data.length; i++) { 
     var latlng = new google.maps.LatLng(data[i].lat, data[i].lng), 
      name = data[i].name; 
      /* add what ever extra data you need */ 
     createMarker(latlng, name, null, null, null); 
     createCheckbox(name, i); // the most important thing is to pass the i; then markers[i] corresponds with checkboxes[i] 
     bounds.extend(latlng); 
     } 
     map.fitBounds(bounds); 
    } 
    }); 
} 

function createMarker(latlng, name, address, info, tts) { 
    /* var html = "<b>" + name + "</b></br><u>" + address + "</u></br>" + info + "</br>" + "Time allowance to spend: " + tts; */ 
    var marker = new google.maps.Marker({ 
    map: map, 
    title: name,  // You should add this 
    position: latlng 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
    /* I'll ignore the infoWindow */ 
    }); 
    markers.push(marker); 
} 
function clearLocations() { 
    for (var i=0; i<markers.length; i++) { 
    markers[i].setMap(null); 
    } 
    markers=[]; 
} 
function checkboxChanged(i, checked) { 
    if(checked) { 
    markers[i].setMap(map); 
    } 
    else { 
    markers[i].setMap(null); 
    } 
} 
function createCheckbox(name, i) { 
    document.getElementById('checkboxes').innerHTML += 
    '<input type="checkbox" checked="checked" onclick="checkboxChanged(' + i + ', this.checked);"> ' + name + '<br>'; 
} 
google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
<style> 
#map-canvas { 
    width: 500px; 
    height: 400px; 
} 
</style> 
<div id="map-canvas"></div> 
<div id="checkboxes"></div>

ajax.php

<?php 
$link = mysqli_connect('localhost', 'root', '', 'stackoverflow'); /* put your settings back */ 
if(!$link) { 
    die ('unable to connect to the database' . mysqli_connect_error()); 
} 
//Get parameters from URL 
$myLat = (isset ($_GET['lat']) ? $_GET['lat'] : 0.0); // give it some default 
$myLng = (isset ($_GET['lng']) ? $_GET['lng'] : 0.0); 
$calcDistance = (isset ($_GET['radius']) ? $_GET['radius'] : 1.0); 
//Search the rows in the markers table 

/* I have a slightly different table; I'll continue with mine; it's easy to put everything back */ 
// $query = sprintf("SELECT siteName,address,lat,lng,info,tts, (6371 * acos(cos(radians('%s')) * cos(radians(lat)) * cos(radians(lng) - radians ('%s')) + sin(radians('%s')) * sin(radians(lat))))AS distance FROM mapTable HAVING distance < '%s' ORDER BY distance LIMIT 0, 50", 
$query = sprintf("SELECT id, lat, lng, name, (6371 * acos(cos(radians('%s')) * cos(radians(lat)) * cos(radians(lng) - radians ('%s')) + sin(radians('%s')) * sin(radians(lat)))) AS distance FROM stations HAVING distance < '%s' ORDER BY distance LIMIT 0, 50", 
mysqli_real_escape_string($link, $myLat), 
mysqli_real_escape_string($link, $myLng), 
mysqli_real_escape_string($link,$myLat), 
mysqli_real_escape_string($link, $calcDistance)); 
$result = mysqli_query($link, $query); 
$row_cnt = mysqli_num_rows($result); 
if(!$result) { 
    die("Invalid query: " . mysqli_error()); 
} 
header("content-type: application/json; charset=utf-8"); 
$items = array(); 
//iterate through the rows, 
while($row = mysqli_fetch_assoc($result)) { 
    $items[] = $row; 
} 
echo json_encode($items); // this can immediatly be read by javascript 
exit; 
?>

您可以添加链接/按钮，蒙山像

<div onclick="searchNearLocations(50.80, 4.35, 20)">click: 20 km radius from (50.80, 4.35)</div>

要添加的位置客户端，请在这里查看我的答案 google getLocation function not work in my script

来源

2015-01-09 15:26:45

非常感谢您的先生Emmanuel，您已将我从我的问题中解救出来。当我回家时，我会把这些放在我的代码上。再次感谢您的祝福 –

我的荣幸。顺便说一句，只有一个想法：xml没有错，但对于JavaScript来说，阅读JSON更容易。这是一种字符串格式，就像我用“var markerNodes = ...”显示的一样。 Javascript将此视为一个对象，没有其他任何东西。用PHP你可以生成该字符串。 sprintf如果完美的话;还有php的函数json_encode。感兴趣吗？ –

我确定。其实我刚开始学习JavaScript 1个月前，因为我已经了解到，你不能不知道JavaScript的情况下做谷歌地图。我也读过关于json的知识，它比xml更容易阅读。我甚至想要使用JSON而不是xml，但是因为我仍然是java脚本编程的初学者，那么我想xml会为我工作。再次感谢Emmanuel先生的帮助。 –

为xml生成的每个标记创建复选框GOOGLE MAPS

回答

相关问题