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

Question

我必须从荷兰国家做一个KML file。

我想做的是：

我想在我的搜索区域中仅突出显示边境附近的国家/地区。

示例：

当用户在 'Amsterdam' 上搜索时。与阿姆斯特丹有联系的还有大约 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米圆圈只选择一个县（我假设你指的是县而不是国家）。
填充相当透明，看不到橙色线条。

请注意，没有任何真正的方法可以查询 adjoining/bordering 多边形。

proof of concept fiddle

代码片段：

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 这对我来说很好。但我不知道如何设置红色突出显示的样式。如果你知道请告诉我。

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

Highlight country around the border from your search area only

javascript

google-maps-api-3

kml

google-fusion-tables