仅在您的搜索区域突出显示边界周围的国家

Question

我必须从荷兰国家/地区制作一个KML文件 。

我想做的是：

我只想从搜索区域突出显示边界附近的国家。

例：

当用户搜索“阿姆斯特丹”时。 与阿姆斯特丹相连的其他9个州（赞丹，阿姆斯特尔芬，霍夫多普，迪门，杜伊文德赖希特......）。 我只希望这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>

但是现在整个荷兰都突显出来了！

我已经更改了代码，但是我仍然想摆脱它的红色亮光区域，有人可以在这里帮助我吗？

Answer 1

您发布的代码对我有效。 这两个问题是：

1. 1米的圆圈仅选择一个县（我假设您是指县而不是国家）。
2. 填充相当透明，看不到橙色线。

请注意，没有任何真正的方法来查询邻接/边界多边形。

概念证明

代码段：

 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" /> 

Answer 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很好地为我工作。 但是我不知道如何设置红色高光。 如果您知道，请告诉我。