Question

背景目的是我想将一个国家划分到不同的地区。例如，将美国划分为所有州。每个州都应该是可点击的或可以选中的方式选择，这样我就可以选择多个州。所有这些都是搜索过滤器的一部分。

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

有没有办法使用Google地图完成此操作？我很可能不会创建很多区域，所以如果唯一的方法是绘制线条，那是可以接受的。

如果你的解决方案是别的，那么我的意思是，无论如何请写出你的解决方案！

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.
};

希望这有帮助！

祝你好运

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

1 个答案: