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

背景的目的是我想将一个国家划分为不同的地区。例如，将美国分为所有国家。每个状态都应该是可点击或可选择的复选框方式，以便我可以选择多个状态。所有这些都是搜索过滤器的一部分。在Google地图上创建可选/可点击的叠加层

将一个国家划分为多个区域的目的是每个区域都包含多个酒店，这样当我选择一个区域时，我将筛选范围缩小到仅存在该区域的酒店。

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

如果您的解决方案是别的，那么我建议，请写下您的解决方案！

2011-07-22 Bridget the Midget

这是一个老问题，但如果有人遇到这种问题，我会回答。我目前正在研究类似的任务，我必须创建可选择的道路。通过使用包含属性，侦听器和方法的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. 
};

希望这有助于！

致以问候

来源

2012-03-04 23:51:09

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

回答

相关问题