仅在您的搜索区域突出显示边界附近的国家/地区 [英] Highlight country around the border from your search area only
本文介绍了仅在您的搜索区域突出显示边界附近的国家/地区的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我必须从荷兰语中制作一个 KML文件国家.
I have to make a KML file from the Dutch country.
我想做的是:
我只想突出显示搜索区域中边界附近的国家/地区.
I want to Highlight only the countries around the border from my search area.
示例:
当用户搜索阿姆斯特丹"时.与阿姆斯特丹相连的其他9个州(赞丹，阿姆斯特尔芬，霍夫多普，迪门，杜伊文德赖希特......).我只希望这9个州都有亮点.
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?
示例我到目前为止的代码:
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?
推荐答案
您发布的代码对我有用.这两个问题是:
Your code as posted works for me. The two issues are:
- 1米的圆圈仅选择一个县(我假设您是指县而不是国家/地区).
- 填充物相当透明，看不到橙色线.
请注意，没有任何真正的方法可以查询邻接/边界多边形.
note that there isn't any real way to query for adjoining/bordering polygons.
代码段:
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" />
这篇关于仅在您的搜索区域突出显示边界附近的国家/地区的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
