我正在使用react-google-map,然后在地图中的每个标记处添加多义线。但是每次我删除数据时,地图上的标记都不会消失。这是我的下面的代码。
Googlemap.js
SERVER_NAME
maploader.js
/*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));
Config.js
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;
这是map.js中我的按钮的示例代码。该按钮将删除数组中的最后一个对象。每次我删除数据时,它都应该反映在不起作用但可以在控制台中工作的地图中。
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,
},
];
任何帮助将不胜感激。 :)
答案 0 :(得分:1)
在Google Maps JavaScript API的removing a marker中,您应该调用setMap()
方法并传递一个null
参数。但是,当您使用react-google-maps library
时,似乎documentation中并未包含该setMap()
方法。
您可以在不使用诸如sample code之类的库的情况下实现用例。请使用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;