我必须从荷兰国家做出KML file。
我想做的是：
我想从搜索区域突出显示边境周边国家/地区。
示例：
用户搜索阿姆斯特丹＆＃39;。其他州与阿姆斯特丹有9个（Zaandam，Amstelveen，Hooftdorp，Diemen，Duivendrecht等......）。我只希望这9个州有一个亮点。
所以我想做的就是突出显示从用户搜索区域边界连接的状态。
有人可以帮我吗？
我的代码示例到目前为止：
function codeAddress() {
var address = document.getElementById("search-input").value; // get search result
geocoder.geocode({'address': address}, geocoderCallback);
}
function initialize() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(lat, lng),
disableDefaultUI: true,
mapTypeControl: false,
zoomControl: true
}
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
geocoder = new google.maps.Geocoder();
geocoder.geocode({'address': address}, geocoderCallback);
}
// function for hilight
function geocoderCallback(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var lat = results[0].geometry.location.lat();
var lng = results[0].geometry.location.lng();
// get location where user are searching
if (!layer) {
layer = new google.maps.FusionTablesLayer({
map:map,
heatmap:{enebled: false},
query: {
select: 'col2',
where:'',
from: tableId
},
styles: [{
where: 'ST_INTERSECTS(col2, CIRCLE(LATLNG(' + lat + ', ' + lng + '),' + radius + '))',
polygonOptions: {
strokeColor: '#FF0000', // color red
fillColor: '#808080' // color gray
}
}, {
// search area
where: 'ST_INTERSECTS(col2, CIRCLE(LATLNG(' + lat + ', ' + lng + '),1))',
polygonOptions: {
strokeColor: '#FFA500',// color orange
strokeWeight: 3,
fillOpacity: 0.08
}
}]
});
layer.setMap(map);
}
else {
layer.setOptions({
query: {
select: 'col2',
from: tableId,
where: 'ST_INTERSECTS(col2, CIRCLE(LATLNG(' + lat + ', ' + lng + '),' + radius + '))'
}
});
layer.setMap(map);
}
} else {
alert("your search was not successful for the following reason: " + status);
}
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas" class="span12 col-md-8 col-sm-9"/>
</div>
但现在整个荷兰都被强调了！
我已经改变了我的代码，但我仍然得到了红色的朦胧区域我想摆脱它，任何身体可以帮助我吗？
答案 0 :(得分：0)
您发布的代码适用于我。这两个问题是：
请注意，没有任何真正的方法可以查询相邻/边界多边形。
代码段：
var tableId = "1WkOReHYpsvNiACHeL5tOxsuYO-nRmzOdXm7B-GDo";
var lat = 52.132633,
lng = 5.291266;
var address = "Amsterdam";
var layer, circle;
function codeAddress() {
address = document.getElementById("search-input").value; // get search result
geocoder.geocode({
'address': address
}, geocoderCallback);
}
function initialize() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(lat, lng),
disableDefaultUI: true,
mapTypeControl: false,
zoomControl: true
}
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': address
}, geocoderCallback);
google.maps.event.addDomListener(document.getElementById('btn'), 'click', codeAddress);
}
// function for hilight
function geocoderCallback(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var lat = results[0].geometry.location.lat();
var lng = results[0].geometry.location.lng();
var bounds = results[0].geometry.viewport;
map.fitBounds(bounds);
// get location where user are searching
var radius = google.maps.geometry.spherical.computeDistanceBetween(bounds.getCenter(), bounds.getNorthEast()); // 20000;
// get location where user are searching
if (!layer) {
layer = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: tableId,
where: 'ST_INTERSECTS(col2, CIRCLE(LATLNG(' + lat + ', ' + lng + '),' + radius + '))'
},
styles: [{
polygonOptions: {
fillColor: '#FFFF00',
strokeColor: '#0000FF',
strokeWeight: 1,
strokeOpacity: 0.8,
fillOpacity: 0.5
}
}, {
where: 'name = \x27' + address + '\x27',
polygonOptions: {
strokeColor: '#FFA500', // color orange
strokeWeight: 5,
strokeOpacity: 0.8,
fillOpacity: 0.001
}
}]
});
} else {
layer.setOptions({
query: {
select: 'geometry',
from: tableId,
where: 'ST_INTERSECTS(col2, CIRCLE(LATLNG(' + lat + ', ' + lng + '),' + radius + '))'
},
styles: [{
polygonOptions: {
fillColor: '#FFFF00',
strokeColor: '#0000FF',
strokeWeight: 1,
strokeOpacity: 0.8,
fillOpacity: 0.5
}
}, {
where: 'name = \x27' + address + '\x27',
polygonOptions: {
strokeColor: '#FFA500', // color orange
strokeWeight: 5,
strokeOpacity: 0.8,
fillOpacity: 0.001
}
}]
});
}
layer.setMap(map);
} else {
alert("your search was not successful for the following reason: " + status);
}
};
google.maps.event.addDomListener(window, 'load', initialize);#map-canvas {
width: 500px;
height: 400px;
}
.layer-wizard-search-label {
font-family: sans-serif
}<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&ext=.js"></script>
<input id="search-input" value="Amersfoort" />
<input id="btn" type="button" value="geocode" />
<div id="map-canvas" class="span12 col-md-8 col-sm-9" />
答案 1 :(得分：0)
function geocoderCallback(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var lat = results[0].geometry.location.lat();
var lng = results[0].geometry.location.lng();
var bounds = results[0].geometry.viewport;
// get location where user are searching
var radius = google.maps.geometry.spherical.computeDistanceBetween(bounds.getCenter(), bounds.getNorthEast()); // 20000;
// get location where user are searching
if (!layer) {
layer1 = new google.maps.FusionTablesLayer({
query: {
select: 'col2',
from: tableId,
where: 'ST_INTERSECTS(col2, CIRCLE(LATLNG(' + lat + ', ' + lng + '),' + radius + '))'
},
styles: [{
where: 'col1\x3d\x27' + address + '\x27',// case sensitive
polygonOptions: {
strokeColor: '#FFA500',// color orange
strokeWeight: 3,
fillOpacity: 0.001
}
}]
});
layer1.setMap(map);
}
}
else {
alert("your search was not successful for the following reason: " + status);
}
};
@geocodezip很好地为我工作。但我不知道如何设计红色突出显示的样式。如果你知道，请告诉我。