问题
I have to make a KML file from the Dutch country.
What I want to do is:
I want to Highlight only the countries around the border from my search area.
Example:
As a user searches on 'Amsterdam'. There are like 9 (Zaandam, Amstelveen, Hooftdorp, Diemen, Duivendrecht, ......) other states that are connected with Amsterdam. I want only these 9 states to have a highlight.
So all I want to do is Highlight the states that are connected on the border from the user search area.
Can anybody help me here?
Example my code I have till now:
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>
But now the whole Netherlands is highlighted!
i have change my code but i still get the red hilight area i wanna get rid of it can any body help me here?
回答1:
Your code as posted works for me. The two issues are:
- the 1 meter circle only selects one county (I assume you mean counties not countries).
- the fill is fairly transparent and the orange lines can't be seen.
note that there isn't any real way to query for adjoining/bordering polygons.
proof of concept fiddle
code snippet:
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" />回答2:
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 Finely this work for me. But i don't know how to style the red Highlight. if you know let me know.
来源：https://stackoverflow.com/questions/30285953/highlight-country-around-the-border-from-your-search-area-only