Google maps api 3 谷歌地图api v3:地理编码多个地址(xml)和创建圆圈
我能够使用静态半径编号获得下面的代码,但我想将radius变量从XML文件传递到圆。我尝试使用var rad=xmldata.getElementsByTagName('radius')[0].firstChild.data;但那没用。我该怎么做Google maps api 3 谷歌地图api v3:地理编码多个地址(xml)和创建圆圈,google-maps-api-3,Google Maps Api 3,我能够使用静态半径编号获得下面的代码,但我想将radius变量从XML文件传递到圆。我尝试使用var rad=xmldata.getElementsByTagName('radius')[0].firstChild.data;但那没用。我该怎么做 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> &l
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script type="text/javascript" src="scripts/downloadxml.js"></script>
<script type="text/javascript">
var map = null;
var geocoder = new google.maps.Geocoder();
var info_window = new google.maps.InfoWindow();
var bounds = new google.maps.LatLngBounds();
function geocodeAddress(xmldata)
{
var address = xmldata.getElementsByTagName('address')[0].firstChild.data;
var city = xmldata.getElementsByTagName('city')[0].firstChild.data;
var address_google_map = address + ', ' + city + ', HI';
var info_text = address + '<br />' + city + ' HI';
geocoder.geocode
({'address': address_google_map},
function (results, status)
{
if (status == google.maps.GeocoderStatus.OK) {
createMarker(results[0].geometry.location, info_text);
} else {
alert("geocode of "+ address +" failed:"+status);
}
});
}
function createMarker(latlng, html)
{
var marker = new google.maps.Circle
({
**radius: 1000,**
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#0000FF",
fillOpacity: 0.35,
map: map,
center: latlng,
});
google.maps.event.addListener(marker, 'click', function() {
info_window.setContent(html);
info_window.open(map, marker);
});
bounds.extend(latlng); // Here we tell what are next viewport bounds
}
function initialize ()
{
var myLatLng = new google.maps.LatLng(21.3069,-157.8583);
var myOptions =
{
zoom: 10,
mapTypeControl: true,
center: myLatLng,
zoomControl: true,
zoomControlOptions:
{
style: google.maps.ZoomControlStyle.SMALL
},
StreetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map'), myOptions);
google.maps.event.addListener
(map, 'click',
function ()
{
info_window.close();
});
downloadUrl('listings.xml',
function (listings_data)
{
listings_data = xmlParse(listings_data);
var markers = listings_data.documentElement.getElementsByTagName('listing');
var geocoder = new google.maps.Geocoder();
for (var i = 0; i < markers.length; i++)
{
geocodeAddress(markers[i]);
}
google.maps.event.addListenerOnce(map, 'idle', function() {map.fitBounds(bounds);});
});
}
</script>
</head>
<body onload="initialize();">
<div id="map" style="width:800px; height: 600px;"></div>
</body>
</html>
谷歌地图多个标记
var-map=null;
var geocoder=new google.maps.geocoder();
var info_window=new google.maps.InfoWindow();
var bounds=new google.maps.LatLngBounds();
函数geocodeAddress(xmldata)
{
var address=xmldata.getElementsByTagName('address')[0].firstChild.data;
var city=xmldata.getElementsByTagName('city')[0].firstChild.data;
var address_google_map=address+','+city+',HI';
var info_text=address+'
'+city+'HI';
地理编码
({'address':address_google_map},
功能(结果、状态)
{
if(status==google.maps.GeocoderStatus.OK){
createMarker(结果[0]。geometry.location,信息文本);
}否则{
警报(“地址+”的地理代码失败:+状态);
}
});
}
函数createMarker(latlng,html)
{
var marker=new google.maps.Circle
({
**半径:1000**
strokeColor:“#FF0000”,
笔划不透明度:0.8,
冲程重量:2,
fillColor:#0000FF“,
不透明度:0.35,
地图:地图,
中心:拉特林,
});
google.maps.event.addListener(标记'click',函数(){
设置内容(html);
信息窗口。打开(地图、标记);
});
bounds.extend(latlng);//这里我们告诉您下一个视口边界是什么
}
函数初始化()
{
var mylatng=newgoogle.maps.LatLng(21.3069,-157.8583);
变异性肌肽=
{
缩放:10,
mapTypeControl:true,
中心:myLatLng,
动物控制:对,
ZoomControl选项:
{
样式:google.maps.ZoomControlStyle.SMALL
},
街景控制:错误,
mapTypeId:google.maps.mapTypeId.ROADMAP
}
map=new google.maps.map(document.getElementById('map'),myOptions);
google.maps.event.addListener
(映射“单击”,
函数()
{
信息窗口。关闭();
});
下载URL('listings.xml',
功能(列表和数据)
{
listings\u data=xmlParse(listings\u data);
var markers=listings_data.documentElement.getElementsByTagName('listing');
var geocoder=new google.maps.geocoder();
对于(var i=0;i
这里是XML
<?xml version="1.0" encoding="UTF-8"?>
<listings>
<listing>
<address>4123 Rideau Valley Rd</address>
<city>MANOTICK</city>
**<radius>10000</radius>**
</listing>
<listing>
<address>4456 Rideau Valley Rd</address>
<city>MANOTICK</city>
**<radius>20000</radius>**
</listing>
</listings>
里多谷路4123号
马诺迪克
**10000**
里多谷路4456号
马诺迪克
**20000**
以下是地址
和城市
的示例:
var radius = xmldata.getElementsByTagName('radius')[0].firstChild.data;
然后:
createMarker(results[0].geometry.location, info_text, radius);
及
使用var radius时,不会发生任何情况。我改为使用var rad,现在它跳到地图上的某个地方。如果提取地址和城市的表达式起作用,那么我不明白为什么radius不应该是正确的。。。。。除了当然,它是一个字符串而不是一个数字,因此可能需要使用number()对其进行重铸。见上面编辑的代码。
function createMarker(latlng, html, radius) {
var marker = new google.maps.Circle({
radius: Number(radius),
...
});