需要帮助提取XML和多个位置在谷歌地图API Javascript代码
Need help to extract XML and multiple locations in Google Maps API Javascript code
我有一个wiki网站，只包含每个wiki页面中的名称和地址，我需要在谷歌地图中映射此。我已经确定了如何实现这一点的谷歌示例，在https://developers.google.com/maps/articles/phpsqlsearch_v3，它使用谷歌地图的API版本3。
我已经能够从每个wiki页面提取名称和地址信息，并将其传递给文件phpsqlsearch_genxml.php，该文件为javascript代码(见下文)生成xml文本，以解析为google地图。
目前，javascript代码(见下文)只有在我像这样在xml文件中包含通用的距离、纬度和经度时才能工作:
<markers>
<marker name="Radio City Music Hall" address="1260 Avenue of the Americas, New York, NY"
distance="50.0000" lat="40.7142" lng="-74.0000"/>
<marker name="W Hotel, Times Square" address="1567 Broadway at 47th St, New York City, NY"
distance="50.0000" lat="40.7142" lng="-74.0000"/>
<marker name="Columbia University Student Service Centre" address="1140 Amsterdam Ave., New York,
distance="50.0000" lat="40.7142" lng="-74.0000"/>
</markers
我只是在xml中提供了几个位置，就像这里的例子一样)。
距离为50.0000,lat为40.7142,lng为-74.000，这只是我输入的通用数字，以获得下面的javascript。是的，我知道这些数字实际上并不正确的上述位置，但它确实在生成一个位置引脚。
我想让下面的Javascript与我的wiki站点实际提供的有限的唯一XML信息(名称和地址)一起工作，这是:
<markers>
<marker name="Radio City Music Hall" address="1260 Avenue of the Americas, New York, NY"/>
<marker name="W Hotel, Times Square" address="1567 Broadway at 47th St, New York City, NY"/>
<marker name="Columbia University Student Service Centre" address="1140 Amsterdam Ave., New York,
NY"/>
</markers>
我在上面的谷歌网站上读过文档，我试过重构，但我只是不能得到有限的xml名称和地址只工作。
有谁知道我如何重构下面的代码，以便只有谷歌地图的地理编码器将查找XML的地址，并提供必要的时间和长度，把一个位置pin在地图上?我知道Google限制了地理编码请求的数量，但我可以担心地图缓存和创建自己的页面和页面。坐标。在下面的代码中，我也不需要距离计算，所以我认为我可以删除searchLocations()和searchLocationsNear(center)方法。
还有，我怎样去掉用户输入呢?现在，javascript代码生成一个用户搜索框，用户点击"搜索"按钮，然后它提供信息。但对于我的地图，我只想生成一个地图，显示纽约市的多个位置pin，并使用工具to
我对谷歌地图相当陌生，所以提前感谢你的帮助!Javascript code from https://developers.google.com/maps/articles/phpsqlsearch_v3:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Google Maps AJAX + mySQL/PHP Example</title>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map;
var markers = [];
var infoWindow;
var locationSelect;
function load() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(40.7142, -74.0000),
zoom: 4,
mapTypeId: 'roadmap',
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
});
infoWindow = new google.maps.InfoWindow();
locationSelect = document.getElementById("locationSelect");
locationSelect.onchange = function() {
var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
if (markerNum != "none"){
google.maps.event.trigger(markers[markerNum], 'click');
}
};
}
function searchLocations() {
var address = document.getElementById("addressInput").value;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({address: address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
searchLocationsNear(results[0].geometry.location);
} else {
alert(address + ' not found');
}
});
}
function clearLocations() {
infoWindow.close();
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers.length = 0;
locationSelect.innerHTML = "";
var option = document.createElement("option");
option.value = "none";
option.innerHTML = "See all results:";
locationSelect.appendChild(option);
}
function searchLocationsNear(center) {
clearLocations();
var radius = document.getElementById('radiusSelect').value;
var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() +
'&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 distance = parseFloat(markerNodes[i].getAttribute("distance"));
var latlng = new google.maps.LatLng(
parseFloat(markerNodes[i].getAttribute("lat")),
parseFloat(markerNodes[i].getAttribute("lng")));
createOption(name, distance, i);
createMarker(latlng, name, address);
bounds.extend(latlng);
}
map.fitBounds(bounds);
locationSelect.style.visibility = "visible";
locationSelect.onchange = function() {
var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
google.maps.event.trigger(markers[markerNum], 'click');
};
});
}
function createMarker(latlng, name, address) {
var html = "<b>" + name + "</b> <br/>" + address;
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);
}
function createOption(name, distance, num) {
var option = document.createElement("option");
option.value = num;
option.innerHTML = name + "(" + distance.toFixed(1) + ")";
locationSelect.appendChild(option);
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request.responseText, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function parseXml(str) {
if (window.ActiveXObject) {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
} else if (window.DOMParser) {
return (new DOMParser).parseFromString(str, 'text/xml');
}
}
function doNothing() {}
//]]>
</script>
</head>
<body style="margin:0px; padding:0px;" onload="load()">
<div>
<input type="text" id="addressInput" size="10"/>
<select id="radiusSelect">
<option value="25" selected>25mi</option>
<option value="100">100mi</option>
<option value="200">200mi</option>
</select>
<input type="button" onclick="searchLocations()" value="Search"/>
</div>
<div><select id="locationSelect" style="width:100%;visibility:hidden"></select></div>
<div id="map" style="width: 100%; height: 80%"></div>
</body>
</html>
您的问题是返回到searchLocationsNear函数的XML不包含任何lat和lng数据，因此不会填充地图。具体来说就是
var latlng = new google.maps.LatLng(
parseFloat(markerNodes[i].getAttribute("lat")),
parseFloat(markerNodes[i].getAttribute("lng")));
将返回NULL。要解决这个问题，您可以尝试在searchLocationsNear函数中添加一个新的google地理代码对象，依次传递所有的地址变量。我也是新人，但我想这样的东西可能会让你开始:
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");
geocoder.geocode({address: address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latlng = new google.maps.LatLng(
parseFloat(results.lat),
parseFloat(results.lng));
}}
我不确定结果对象如何包含后期和lng数据，所以你可能要调整这个-我也是新的，但希望能有所帮助。
祝你好运!
相关文章：
- 谷歌地图固定位置覆盖
- 在谷歌地图上绘制位置数据库
- 使用ASP.NET将谷歌地图添加到项目中，并从数据库中检索位置
- PHP谷歌地图-位置红色气球没有显示
- 谷歌地图laravel上圆圈的错误位置
- 点击href在谷歌地图中加载位置
- 使用谷歌地图API和phonegap显示当前位置+方向
- 谷歌地图API标记没有标记我的位置
- 在TWebBrowser(谷歌地图）中显示位置，而无需单击按钮
- 如何使用谷歌地图中的纬度和经度搜索附近的位置
- 在谷歌地图上显示所有搜索到的位置结果
- markrimage在谷歌地图api v3中的特定位置后消失
- 谷歌地图Javascript API位置库
- 如何在谷歌地图上为单个位置添加多个标记
- 地理位置谷歌地图jquery
- 显示提醒MSG分享你的位置谷歌地图
- 没有找到当前位置-谷歌地图API
- 添加默认位置谷歌地图
- 如何将多个标记添加到移动位置谷歌地图，Javascript
- 获取一个点附近的政治位置 - 谷歌地图API V3
