在 Google 地图上创建可选择/可点击的叠加层

Question

背景目的是我想把一个国家分成不同的区域。例如，将美国分为所有州。每个状态都应该可以单击或以复选框的方式选择，以便我可以选择多个状态。所有这些都是搜索过滤器的一部分。

将一个国家/地区划分为多个地区的目的是每个地区都包含许多酒店，因此当我选择一个地区时，我会将过滤器缩小到仅该地区存在的酒店。

有没有办法使用谷歌地图来实现这一点？我很可能不会创建很多区域，因此如果唯一的方法是手动绘制线条，这是可以接受的。

如果您的解决方案与我的建议不同，请无论如何写下您的解决方案！

Answer 1

这是一个老问题，但如果有人也遇到此类问题，我无论如何都会回答。我目前正在从事类似的任务，我必须创建可选择的道路。我想出了一个解决方案，使用包含属性、侦听器和方法的 JavaScript“类”，并在循环中使用 setMap(map) 函数将它们添加到地图画布。

基本上，这会动态创建具有可选区域的地图画布，但您仍然必须手动创建一个数据集，其中包含区域、它们的名称和其他信息以及它们的坐标边界。

我认为使用这种方法创建可选择的矩形、圆形、道路等具有悬停效果的其他对象也很容易。

伪代码：

function initialize() {
    // initialize Google Maps canvas normally

    // areaDataSet variable is an array of containing all areas to be 
    // drawed and the necessary information needed to create polygon areas
    // (coordinate boundaries, and so on)

    // For example var areaDataSet = [{ "name" : "Texas", "coords" : [latitudes and longitudes], "hasHotelsInCoords" : [...] }, { ... } ]

    var areas = [];

    for ( i in areaDataSet ) {
         var area = new google.maps.Polygon({ 
             path: [coordinates as google.maps.LatLng objects] 
         });
         areas.push(new MyAreaClass(area));
    }

    for ( i in areas ) {
        areas[i].setMap(map);
    }
}

function MyAreaClass(areaData) {
    this.area = areaData;
    var selected = false; // not selected by default
    // + all other data you want the areas to contain

    // Add listeners using google.maps.event.addListener to all class instances
    // when they are constructed.

    // for instance:

    google.maps.event.addListener(area, 'mouseover', function() {
        if (selected == false) {
           area.setOptions( { [options you want to set when area is hovered 
           but not selected, for instance, color change] });
        };
        else {
            area.setOptions({ [options you want to set when area is hovered 
            and selected] });
        };
    });

    // Add listeners also for when area is not hovered anymore, respectively,
    // and other methods you might want to call when areas are being interacted with.
};

希望这有帮助！

此致