如何将多个geoJson多边形制作成多个可点击事件

Question

我正在以下位置引用 geoJson 文件，以将状态多边形添加到印度地图

https://raw.githubusercontent.com/geohacker/india/master/state/india_telengana.geojson

地图正在使用 googlemaps api

我现在想做的是让每个多边形成为可点击的事件。

在研究中我发现：

• 关于 stackoverflow 的类似查询尚未得到解答
• Leaflet 地图有很多帮助，但 googlemaps 没有
• 有一些建议表明诸如此类的 JSON 文件是数组，但是这些示例中 JSON 文件的构成似乎比我正在访问的要简单得多。在其他示例中很容易看到数组标识符。这些查询也只是试图从数组中返回一个属性，而不是将数组用作可点击事件。

我现在已经创建了一个 JSFiddle，但我无法加载最终的地图（它在小提琴之外加载）：

https://jsfiddle.net/everare/df6jbuft/

此处的代码显示我尝试使用 googlemaps https://developers.google.com/maps/documentation/javascript/combining-data 的指导调用事件

HTML：

<div class="container">
<div id="map"style="width:700px;height:700px;border:10px solid black;">              </div>
</div>

Javascript：

//Map construction

var map;
  function initMap() {{
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: 22.71, lng: 82.48},
      zoom: 5,
    zoomControl: true,
    zoomControlOptions: {
    position: google.maps.ControlPosition.TOP_LEFT
    },

    styles:[
 {    elementType: 'geometry',    stylers: [ {color: '#242f3e'}]},
 {    elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
 {    elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
 {    featureType: 'administrative', elementType: 'geometry', stylers:    [{visibility: 'off'}]},
 {    featureType: 'administrative.locality',elementType:    'labels.text.fill',stylers: [{color: '#d59563'}]},
 {    featureType: 'poi', stylers: [{visibility: 'off'}]},
 {    featureType: 'poi', elementType: 'labels.text.fill',stylers: [{color: '#d59563'}]},
 {    featureType: 'poi.park',    elementType: 'geometry',    stylers: [{color: '#263c3f'}] },
 {    featureType: 'poi.park',   elementType: 'labels.text.fill',    stylers: [{color: '#6b9a76'}]},
 {    featureType: 'road',    stylers: [{visibility: 'off'}]},
 {    featureType: 'road',    elementType: 'geometry', stylers: [{color: '#38414e'}]},
 {    featureType: 'road',    elementType: 'geometry.stroke',    stylers: [{color: '#212a37'}]},
  {    featureType: 'road',    elementType: 'labels.icon',    stylers: [{visibility: 'off'}]},
 {    featureType: 'road',    elementType: 'labels.text.fill',    stylers: [{color: '#9ca5b3'}]},
 {    featureType: 'road.highway', elementType: 'geometry',    stylers: [{color: '#746855'}]},
 {    featureType: 'road.highway', elementType: 'geometry.stroke',stylers: [{color: '#1f2835'}]},
 {    featureType: 'road.highway', elementType: 'labels.text.fill', stylers: [{color: '#f3d19c'}]},
 {    featureType: 'transit',    stylers: [{visibility: 'off'}]},
 {    featureType: 'transit',    elementType: 'geometry',  stylers: [{color: '#2f3948'}]},
 {    featureType: 'transit.station', elementType: 'labels.text.fill', stylers: [{color: '#d59563'}]},
  {    featureType: 'water', elementType: 'geometry',stylers: [{color: '#17263c'}]},
  {    featureType: 'water', elementType: 'labels.text.fill', stylers: [{color: '#515c6d' }]},
 {    featureType: 'water', elementType: 'labels.text.stroke',  stylers: [{color: '#17263c'}]
 }

]  
    });
    }
    // Loads the state boundary polygons from a GeoJSON source. 
    function loadMapShapes() {
        map.data.loadGeoJson('https://raw.githubusercontent.com/geohacker/india/master/state/india_telengana.geojson', { idPropertyName: 'STATE' });
    }

   //Responds to the mouse-in event on a map shape (state).
   //@param {?google.maps.MouseEvent} e

    function mouseInToRegion(e) {
    // set the hover state so the setStyle function can change the border
    e.feature.setProperty('state', 'hover');
    }

    //Polygon style
    map.data.setStyle({
    fillColor: '#FF8000',
    strokeWeight: 1
    });


    // set up  events for google.maps.Data

    map.data.addListener('mouseover', mouseInToRegion);

    // state polygons only need to be loaded once, do them now
    loadMapShapes();

  }

CSS：

body {
background-color: white;
background-repeat: no-repeat;
background-position: 0px 0px; 
}
.container {
position: absolute;
top: 100px;
left: 60px;

Answer 1

如果您的map.data.loadGeoJson 生成格式正确的数据对象，则应该已经设置了map 的data。我会console.log 数据以确保生成的对象是您认为的那样。

我不确定这是否是“规范”工作流程，但我的工作流程如下：

• 定义地图选项；
• 创建新地图；
• 定义层（在您的情况下只有 1 个）；
• 将数据加载到图层中；
• 将图层与地图相关联。

所以我的带有一个数据层的地图代码如下所示：

// Step 1. Define Map Options
// note centroid_lat and centroid_lng are evaluated from the data, elsewhere
var tango = {lat: centroid_lat, lng: centroid_lng};
var mapOptions = {
    zoom: 15,
    center: tango,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

// Step 2. Make a new Map object
var map=new google.maps.Map($('#mapcanvas')[0], mapOptions);

// Step 3. Make a new Data Layer object
var cLayer = new google.maps.Data();

// Step 4. Put some data into the layer
$.getJSON("json/myfile.json", function(data){
     d1 = topojson.feature(data, data.objects.address)
     cLayer.addGeoJson(d1);
      });

// Step 5. Assign the new layer to the map    
cLayer.setMap(map);

$.getJSON 和 topojson 应该清楚地表明此示例使用 jquery 和 d3js topojson 库。

我创建的大多数图层实际上都使用 PHP 脚本从支持 PostGIS 的 PostgreSQL 数据库中检索数据，该脚本获取一些过滤输入，审查输入（以防止 SQL 注入等），然后在查询中填写变量名它被传递给 PostgreSQL。该查询生成 GeoJSON 并将其通过管道传回 DOM，并在其中附加到数据对象。

所以我填充数据层的代码是

// db_schema, base_table and thisBox are set elsewhere (thisBox is the 
// bounding box of the viewport)
var c_url="v1/ws_base_fetch.php?schema="+db_schema+"&table="+base_table+"&thisBox="+thisBox;
    // console.log('URL is :'+c_url); // testing only
$.getJSON(
    c_url,
    null,
    function success(data) {
       // Add data to layer, specifying address as idPropertyName
       // this makes address unique, and data with duplicate address 
       // will not be loaded (it will be retrieved though)
       cLayer.addGeoJson(data,{idPropertyName:"address"});
    });