如何在反应中免费在网站中显示谷歌地图

Question

我是一名新的 React 开发人员，在我的项目中，我有一个任务是使用来自 API 的纬度和经度在地图中显示位置。他们想要像谷歌地图这样的东西，所以我没有尝试其他的，我跳进了谷歌地图API，我尝试了一下，最终在地图中显示了位置，但它显示了“仅用于开发目的”文本。我应该做什么或者有什么替代方案可以使用。

请给我一个可行的解决方案，否则我们将不胜感激。

我尝试在 Youtube、google、Chat GPT 和其他地图库（如 MapBox 等）上找到解决方案，但没有一个能正常工作。

Answer 1

方法如下：https://jsfiddle.net/porL9w52/4/

   var infowindow;
 var map;
 //var downloadUrl;

    function initialize() {
      var mapOptions = {
          zoom: 13,
          center: new google.maps.LatLng(49.83826, 24.02324),
          mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      map = new google.maps.Map(document.getElementById('map'), mapOptions);
      downloadUrl("https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml", function(data) {
        var infoWindow = new google.maps.InfoWindow;
        infoWindow.setContent('Location found.');
        var bounds = new google.maps.LatLngBounds();
            var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName('marker');        
        for (var i = 0; i < markers.length; i++) {
          var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
                                              parseFloat(markers[i].getAttribute("lng")));
          bounds.extend(latlng);
          var marker = createMarker(markers[i].getAttribute("name"), latlng);
        }//finish loop
       // map.fitBounds(bounds);
      }); //end downloadurl
      function downloadUrl(url, callback) {
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;

        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
          }
        };

        request.open('GET', url, true);
        request.send(null);
      }

      function doNothing() {}
    }

    function createMarker(name, latlng) {
       var marker = new google.maps.Marker({
                               position: latlng,                               
                               map: map
                               });
       google.maps.event.addListener(marker, "click", function() {
         if (infowindow) infowindow.close();
         infowindow = new google.maps.InfoWindow({content: name});
         infowindow.open(map, marker);
       });
       return marker;
    }