使用功能组件在 google-map-react 中向 Google Maps 添加标记答案

【问题标题】：Adding Marker to Google Maps in google-map-react with functional components使用功能组件在 google-map-react 中向 Google Maps 添加标记
【发布时间】：2020-12-03 13:40:17
【问题描述】：

我正在使用google-map-react NPM 包来创建谷歌地图和几个标记。坐标、信息窗口、图标等信息将来自 JSON 文件。我添加了 onGoogleApiLoaded 和 yesIWantToUseGoogleMapApiInternals。

这是我的代码目前的样子，标记暂时在这个文件中

import React, { useEffect } from 'react'
import GoogleMapReact from 'google-map-react'

let mapOptions = {
    center: { lat: 39.56939, lng: -40.0000 },
    zoom: 3.5,
    disableDefaultUI: true,
    gestureHandling: 'none',
    zoomControl: false,
    scaleControl: false,
    zoomControlOptions: false,
    scrollwheel: false,
    panControl: false,
  };
function ModelsMap({ data, state }) {

    console.log(data.models)

    function initMap() {

        let markers = [
         /.../
        ];

        function Marker(props) {

            let marker = new google.maps.marker({
                position: props.coords,
                content: props.content,
                icon: props.icon,
                map: map
            });

            let infoWindow = new google.maps.InfoWindow({
                content: props.content
            });

            Marker.addListener('click', function () {
                infoWindow.open(map, marker);
            })
        }
    }
     // useEffect(initMap, []); it will only render once 
    return (
        <div style={{height: '100vh', width: '100%' }}>
            <GoogleMapReact
                bootstrapURLKeys={{ key: "YOUR_API_KEY" }}
                defaultCenter={{lat: 39.56939, lng: -40.0000 }}
                defaultZoom={3.5}
                options={mapOptions}
                yesIWantToUseGoogleMapApiInternals
                onGoogleApiLoaded={({ map, maps }) => ModelsMap(map, maps)}
                >
                
            </GoogleMapReact>
        </div>
    );
}
export default ModelsMap;

我已按照This other stack overflow post 中列出的解决方案进行操作，但也没有用。

【问题讨论】：

标签： javascript reactjs google-maps

【解决方案1】：

根据您提供的 StackOverflow 上的答案，他们使用 new maps.Marker() 创建新的 Google 地图标记。如果您想从 json 数据中获取坐标、图标和标记的不同属性的值，您需要将这个 new maps.Marker() 用于循环遍历每个 json 数据。下面应该是您的ModelsMap 的值。不要 get 导入你的 json 文件。

const ModelsMap = (map, maps) => {
    //instantiate array that will hold your Json Data
    let dataArray = [];
    //push your Json Data in the array
    {
      data.map((markerJson) => dataArray.push(markerJson));
    }

    //Loop through the dataArray to create a marker per data using the coordinates in the json
    for (let i = 0; i < dataArray.length; i++) {
      let marker = new maps.Marker({
        position: { lat: dataArray[i].lat, lng: dataArray[i].lng },
        map,
        label: dataArray[i].id,
      });
    }
  };

这是sample code that shows this。请使用您自己的 API 密钥来进行此操作。

旁注：我删除了您问题中的 API 密钥。今后请不要在公共网站上分享您的 API 密钥。

【讨论】：

【解决方案2】：

从您的谷歌云控制台启用 javascript map api

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。