React-google-maps：如何创建一个可点击的KML地图，以显示KML的元数据？

Question

编辑：根据指南，有一个名为getMetadata()的方法。我如何使用它来返回props？

描述：

使用React-google-maps包，我已经能够加载带有自己kml文件的Google地图。该KML文件包含多个形状，每个形状后面都有元数据。我想要的是，当用户单击其中一个形状时，他可以看到形状后面的数据，例如弹出窗口。

示例

假设我有一个Google地图，其中包含一个显示两个国家的kml文件。用户悬停在这些国家中的一个上方，并看到一个弹出窗口，显示他所在的国家。他悬停在第二个国家上方并获得相同的结果。当他单击覆盖在国家上方的kml形状时，他会收到更多信息。

这需要我知道一些东西：

- 如何在KML形状上创建悬停效果，显示基于形状的数据
- 如何在KML形状上创建单击事件，显示基于形状的数据

然而，我无法理解如何使这个KML文件交互。
这是我到目前为止所拥有的：

import React, { Component } from 'react';
import { withScriptjs, withGoogleMap, GoogleMap, Marker, KmlLayer } from "react-google-maps"

const MyMapComponent = withScriptjs(withGoogleMap((props) =>
  <GoogleMap
    defaultZoom={8}
    defaultCenter={{ lat: 50.5010789, lng: 4.4764595 }}
  >
    <KmlLayer 
        url='https://example.be/kmlfile.kml'
        options={{ preserveViewport : false}}
    />
    {props.isMarkerShown && <Marker position={{ lat: 50.5010789, lng: 4.4764595 }} />}
  </GoogleMap>
))


export default class GoogleMaps extends Component {
    render(){
        return( 
            <MyMapComponent
              isMarkerShown
              googleMapURL="https://maps.googleapis.com/maps/api/js?key=MYKEY&v=3.exp&libraries=geometry,drawing,places"
              loadingElement={<div style={{ height: `100%` }} />}
              containerElement={<div style={{ height: `100%` }} />}
              mapElement={<div style={{ height: `100%` }} />}
            />
        )
    }
}

- Cédric Bloem

Answer 1

这是我按照一些教程自己修复的方法。我完全忽略了react-google-maps包，只使用纯JavaScript。如果有人想要添加和切换KMLayers，并对其进行点击和悬停操作，这就是我的方法和给其他开发者的建议：

提示

1：用GEOJSON替换KML

首先，我现在不使用KMLayer，而是使用Datalayer。这使我更具控制力，并且有更多谷歌文档。因此，您必须将KML转换为GeoJson。我发现@Mapbox toGeoJSON做得很好，因为它还保留了您的自定义数据（如果您想要更自由地处理数据，则非常重要！）。此外，他们还分享了他们的代码以在应用程序中集成，因此您不必每次手动转换。

2：分析Google Api Data Layer文档

听起来很简单，但仍值得一提。正如我所说，谷歌分享了许多关于实现数据层的信息。如何添加点击和鼠标悬停事件，如何为每个单独的形状设置样式并获取特定信息等等。
谷歌关于数据层的文档

3：用addGeoJson()替换loadGeoJson()

如果您的应用程序需要在不同的数据层之间切换或者只需添加和删除一个数据层，使用loadGeoJson()时很快就会发现自己陷入困境。因此，使用addGeoJson()，这将允许您使用map.data.remove()来移除当前的数据层。

来源：@mensi在如何移除数据层上的回答。

最终代码

import React, { Component } from 'react';
import { SearchConsumer } from '../App.js';
import Icon from '../library/icons/Icon';

var map = ''
var dataLayer = ''
export default class mapSelection extends Component  {
    constructor(props){
        super(props)
        this.onScriptLoad = this.onScriptLoad.bind(this)
    }
    onScriptLoad() {
        // CREATE YOUR GOOGLE MAPS
        map = new window.google.maps.Map(
          document.getElementById('map'),
           {
                // ADD OPTIONS LIKE STYLE, CENTER, GESTUREHANDLING, ...
                center: { lat: 50.5, lng: 4 },
                zoom: 8,
                gestureHandling: 'greedy',
                disableDefaultUI: true,
            });
    }
    dataHandler = (getJson) => {
        // FIRST I REMOVE THE CURRENT LAYER (IF THERE IS ONE)
        for (var i = 0; i < dataLayer.length; i++) {
            map.data.remove(dataLayer[i])
        }
        // THEN I FETCH MY JSON FILE, IN HERE I'M USING A PROP BECAUSE 
        // I WANT TO USE THIS DATAHANDLER MULTIPLE TIMES & DYNAMICALLY 
        // I CAN NOW DO SOMETHING LIKE THIS: 
        // onClick(this.dataHandler(www.anotherlinktojsonfile.com/yourjsonfile.json))
        // ON EACH BUTTON AND CHOOSE WHICH JSON FILE NEEDS TO BE FETCHED IN MY DATAHANDLER.
        fetch(getJson)
            .then(response => response.json())
            .then(featureCollection => {
                dataLayer = map.data.addGeoJson(featureCollection)
                // ADD SOME NEW STYLE IF YOU WANT TO
                map.data.setStyle({strokeWeight: 0.5, fillOpacity: 0 });
            }
            );
        map.data.addListener('mouseover', (event) => {
            map.data.revertStyle();
            // ADD A STYLE WHEN YOU HOVER OVER A SPECIFIC POLYGON
            map.data.overrideStyle(event.feature, {strokeWeight: 1, fillOpacity: 0.1 });
            // IN CONSOLE LOG, YOU CAN SEE ALL THE DATA YOU CAN RETURN
            console.log(event.feature)
        });
        map.data.addListener('mouseout', (event) => {
            // REVERT THE STYLE TO HOW IT WAS WHEN YOU HOVER OUT
            map.data.revertStyle();
        });
    }
    componentDidMount() {
        // LOADING THE GOOGLE MAPS ITSELF
        if (!window.google) {
          var s = document.createElement('script');
          s.type = 'text/javascript';
          s.src = 'https://maps.google.com/maps/api/js?key=' + process.env.REACT_APP_MAPS_API_KEY;
          var x = document.getElementsByTagName('script')[0];
          x.parentNode.insertBefore(s, x);
          // Below is important. 
          //We cannot access google.maps until it's finished loading
          s.addEventListener('load', e => {
            this.onScriptLoad()
            this.dataHandler('https://linktoyourjson.com/yourjsonfile.json')

          })
        } else {
          this.onScriptLoad()
        }
    }
    render () {
        return (
            <div id='mapContainer'>
                <div style={{ width: '100%', height: '100%' }} id='map' />
            </div>
        );
    }
};

额外学分

我还要感谢cuneyt.aliustaoglu.biz提供的详细教程，让我学会了如何在不使用任何软件包的情况下使用Google Maps。

同时也感谢所有帮助我解决小问题的人。

有问题或建议吗？

如果您有任何问题或意见，可以随时告诉我，我会根据需要编辑此帖子。

- Cédric Bloem

---

太棒了！感谢Cédric的帖子！ - fermi