मैं प्रतिक्रिया-गूगल-मानचित्र का उपयोग कर रहा हूं, और मैं मानचित्र में प्रत्येक मार्कर को पॉली लाइन जोड़ता हूं। लेकिन हर बार जब मैं डेटा हटाता हूं तो मानचित्र पर मार्कर गायब नहीं होता है। यहाँ मेरा कोड नीचे है।

गूगलमैप.जेएस

 /*global google*/
import React, { Component } from "react";
import { Polyline } from "react-google-maps";
import {
  withGoogleMap,
  withScriptjs,
  Marker,
  GoogleMap,
  DirectionsRenderer,
} from "react-google-maps";

const Map = ({ places, zoom, center }) => {
  return (
    <GoogleMap defaultZoom={zoom} defaultCenter={center}>
      <Markers places={places} />

      <Polyline
        path={places}
        options={{
          strokeColor: "#FFE900",
          strokeOpacity: 2,
          strokeWeight: 3,
        }}
      />
    </GoogleMap>
  );
};

const Markers = ({ places }) => {
  return places.map((place) => {
    return (
      <Marker key={place.id} position={{ lat: place.lat, lng: place.lng }} />
    );
  });
};


class MapWithMarker extends Component {

  constructor(props) {
    super(props);
    this.state = { places: this.props.places }; //initialize initial state from props
  }

  render() {
    return (
      <div>
        <Map
          center={this.props.center}
          zoom={this.props.zoom}
          places={this.state.places}
          containerElement={<div style={{ height: `100vh`, width: "100% " }} />}
          mapElement={<div style={{ height: `100%` }} />}
        />
      </div>
    );
  }
}

export default withScriptjs(withGoogleMap(MapWithMarker));

मैपलोडर.जेएस

import React, { Component, useState } from "react";
import "./config";
import Map from "./googlemap";

const App = () => {
  const place = places;

  return (
    <div>
      <Map
        googleMapURL="https://maps.googleapis.com/maps/api/js?key=API_KEY"
        loadingElement={<div style={{ height: `100%` }} />}
        containerElement={<div style={{ height: `100vh` }} />}
        mapElement={<div style={{ height: `100%` }} />}
        center={{ lat: 14.6091, lng: 121.0223 }}
        zoom={12}
        places={places}
      />
    </div>
  );
};

export default App;

कॉन्फिग.जेएस

places = [
  {
    name: "Manila",
    title: "Newcastle",
    lat: 14.6091,
    lng: 121.0223,
    id: 1,
  },
  {
    name: "Taguig",
    title: "Sydney",
    lat: 14.5135352,
    lng: 121.0303829,
    id: 2,
  },
  {
    name: "Makati",
    title: "Melbourne",
    lat: 14.554592,
    lng: 121.0156802,
    id: 3,
  },
];

और यहाँ मेरे map.js में मेरे बटन का नमूना कोड है। यह वह बटन है जो सरणी में अंतिम वस्तु को हटा देगा। हर बार जब मैं एक डेटा हटाता हूं तो इसे मानचित्र में प्रतिबिंबित किया जाना चाहिए जो काम नहीं कर रहा है लेकिन कंसोल में काम कर रहा है।

function clickSubmit(e) {
    places.pop();
  }

किसी भी सहायता की सराहना की जाएगी। :)

2
Alfon Labadan 11 सितंबर 2020, 14:03

1 उत्तर

सबसे बढ़िया उत्तर

Google मानचित्र JavaScript API में मार्कर निकालने में, आपको कॉल करना चाहिए setMap() विधि और null तर्क पास करें। हालांकि, जैसा कि आप react-google-maps library का उपयोग कर रहे हैं जो setMap() विधि उनके दस्तावेज़ीकरण के अनुसार शामिल नहीं है।

आप इस नमूना कोड। कोड के काम करने के लिए कृपया Maps.js फ़ाइल में अपनी API कुंजी का उपयोग करें।

कृपया घटक की इनलाइन टिप्पणियों के साथ कोड स्निपेट देखें जो इसे दिखाता है:

import React, { Component } from "react";
import { render } from "react-dom";
import Map from "./Map";
import "./style.css";
import "./config";

class App extends Component {
  render() {
    return (
      <div id="container">
        <input type="button" value="Delete " id="myBtn" />
        <Map
          id="myMap"
          options={{
            center: { lat: 14.6091, lng: 121.0223 },
            zoom: 12,
          }}
          onMapLoad={(map) => {
            let placeArray = [];
            let markersArray = [];
            let polylinePath = [];
            let polyline;
            //putting the places from config.js in an array
            {
              places.map((markerJson) => placeArray.push(markerJson));
            }
            
            //Adding Marker for each coordinate in the array
            for (let i = 0; i < placeArray.length; i++) {
              addMarker({ lat: placeArray[i].lat, lng: placeArray[i].lng });
            }
            //function for creating polyline
            createPolyline();

            document.getElementById("myBtn").addEventListener("click", function () {
                //Removing marker of the last coordinate in the map
                markersArray[placeArray.length - 1].setMap(null);
                //removing last object in the place and marker array
                placeArray.pop();
                markersArray.pop();
                //Removing polyline in the map
                polyline.setMap(null);
                //function for creating new polyline using the path that does not include the deleted coordinate
                createPolyline();
            })

          
            function createPolyline() {
             //clearing polyline Path array
              polylinePath = [];
             //putting the coordinates in the polylinepath array to be used as the path of polyline
              for (let i = 0; i < placeArray.length; i++) {
                polylinePath.push({
                  lat: placeArray[i].lat,
                  lng: placeArray[i].lng,
                });
              }
              
              //creating polyline
              polyline = new google.maps.Polyline({
                path: polylinePath,
                geodesic: true,
                strokeColor: "#FF0000",
                strokeOpacity: 1.0,
                strokeWeight: 2,
              })
              //showing polyline in the map
              polyline.setMap(map);
            }
            // Adds a marker to the map and push to the array.
            function addMarker(location) {
              //creating new marker
              const marker = new google.maps.Marker({
                position: location,
                map: map,
              });
              //putting the created marker in the markers array to be easily deleted in the map
              markersArray.push(marker);
            }
          }}
        />
      </div>
    );
  }
}

export default App;
1
Pagemag 14 सितंबर 2020, 05:15