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生成格式正确的数据对象，则应已设置data map。我会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库。

我创建的大多数图层实际上都是从支持PostGIS的PostgreSQL数据库中检索数据，使用PHP脚本获取一些过滤输入，检查输入（以防止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"});
    });

如何将多个geoJson多边形组成多个可单击事件

1 个答案: