我对下面的代码有疑问:为什么谷歌地图不显示?
该脚本之前一直有效,直到我插入了告诉地图绘制关于所选点的圆圈的部分。我在这里使用了示例代码中的代码。我不确定它是否已正确修改。我在这里要做的是使用选定的点并在其周围创建一个圆形缓冲区。距离可以由最终用户指定,并且将显示此距离内的多边形。
数据是私有的,因此不能共享。TableID1 是点图层,TableID2 是多边形图层。
任何帮助是极大的赞赏。
这是代码:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Wells</title>
<style>
#map-canvas { width:800px; height:600px; }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var tableId = '';
var tableId2 = '';
var locationColumn = 'geometry';
var locationColumn2 = 'geometry';
var map = new google.maps.Map(document.getElementById('map-canvas'),
{
center: new google.maps.LatLng(43.85012691109855, -79.75539434814452),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var layer = new google.maps.FusionTablesLayer({
query: {
select: locationColumn,
from: tableId,
where: 'ST_INTERSECTS (description, CIRCLE(wellid), 5000))'
},
map: map
});
var layer2 = new google.maps.FusionTablesLayer({
query: {
select: locationColumn2,
from: tableId2
},
map: map
});
google.maps.event.addDomListener(document.getElementById('wellid'),
'change',
function() {
updateMap(layer, tableId, locationColumn);
});
}
// Update the query sent to the Fusion Table Layer based on
// the user selection in the select menu
function updateMap(layer, tableId, locationColumn) {
var wellid = document.getElementById('wellid').value;
if (wellid) {
layer.setOptions({
query: {
select: locationColumn,
from: tableId,
where: "description CONTAINS '" + wellid + "'"
}
});
}
else {
layer.setOptions({
query: {
select: locationColumn,
from: tableId
}
});
}
}
// Create a map circle object to visually show the radius.
var circle = new google.maps.Circle({
center: new google.maps.LatLng(wellid),
radius: 5000,
map: map,
fillOpacity: 0.2,
strokeOpacity: 0.5,
strokeWeight: 1
});
// Update the radius when the user makes a selection.
google.maps.event.addDomListener(document.getElementById('radius'),
'change', function() {
var meters = parseInt(this.value, 10);
layer.setOptions({
query: {
select: 'description',
from: tableid,
where: 'ST_INTERSECTS(Address, ' +
'CIRCLE(wellid), ' + meters + '))'
}
});
circle.setRadius(meters);
});
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<label>Well ID:</label>
<select id="wellid">
<option value="">--Select--</option>
<option value="Well ID: 9">9</option>
<option value="Well ID: 129">129</option>
<option value="Well ID: 130">130</option>
<option value="Well ID: 131">131</option>
<option value="Well ID: 384">384</option>
<option value="Well ID: 469">469</option>
<option value="Well ID: 470">470</option>
<option value="Well ID: 494">494</option>
<option value="Well ID: 495">495</option>
<option value="Well ID: 697">697</option>
<option value="Well ID: 698">698</option>
<option value="Well ID: 735">735</option>
<option value="Well ID: 737">737</option>
</select>
</body>
</html>