【React.js+Google Map】标记地点

React.js有一套自己调用Google Map的机制。
附链接：https://www.npmjs.com/package/google-maps-react

首先，你需要去申请一个API key。
具体的安装和使用方法在以上链接中都有，这里主要想记录一下标记地点的写法。
Google Map自带的marker可以实现标记地点的功能。

代码如下：

import React from 'react';
import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react';

export class GMap extends React.Component {
  state = {
    showingInfoWindow: false,
    activeMarker: {},
    selectedPlace: {},
  };

  onMarkerClick = (props, marker, e) =>
    this.setState({
      selectedPlace: props,
      activeMarker: marker,
      showingInfoWindow: true
    });

  onMapClicked = (props) => {
    if (this.state.showingInfoWindow) {
      this.setState({
        showingInfoWindow: false,
        activeMarker: null
      })
    }
  };

  render() {
    return (
      <Map google={this.props.google}
           initialCenter={{
             lat: 39.9060115,
             lng: 116.3956187
           }}
           zoom={16.75}
           onClick={this.onMapClicked}>
        <Marker onClick={this.onMarkerClick}
                name={'descripton'}
                position={{lat: 39.9055688, lng: 116.39749}}/>

        <InfoWindow
          marker={this.state.activeMarker}
          visible={this.state.showingInfoWindow}>
          <div>
            <h3>{this.state.selectedPlace.name}</h3>
          </div>
        </InfoWindow>
      </Map>
    )
  }
}

export default GoogleApiWrapper({
  apiKey: (YOUR_GOOGLE_API_KEY_GOES_HERE)
})(GMap)

展示效果：

这是一个对天安门广场进行标记的地图。

 <Map google={this.props.google}
           initialCenter={{
             lat: 39.9060115,
             lng: 116.3956187
           }}
           zoom={16.75}
           onClick={this.onMapClicked}>

initialCenter可以确定初始位置。

<Marker onClick={this.onMarkerClick}
                name={'descripton'}
                position={{lat: 39.9055688, lng: 116.39749}}/>

position确定的是标记位置。
其中lat和lng代表的是一个地点的经纬度。
那么怎么获取一个地点的经纬度呢？
可以通过Google在线地图获取。
在搜索框中输入想要找到的标记的名字的名字，鼠标收缩找到想要展示的页面的收缩比例。记录下经纬度和zoom值。

如图所示，我希望最终展示的地图的比例如图所示，只需在initialCenter中记录该地址的经纬度，以及zoom值即可。

图中地址中包含其经纬度及z值。

然后是标记的经纬度。若想使位置更为准确，建议将地图放大至最大，记录下经纬度，将其写在marker的position中即可。

marker的形状是可以更改的。
附链接：https://www.cnblogs.com/Leo_wl/p/5797870.html

查了好几天怎么调用地图，怎么标记地点，终于尘埃落定。
虽然其中原理并未完全搞懂，不过想要的效果已经出来了，算是近了一大步。