在react-google-map上动态添加标记 [英] Dynamically Adding Markers on react-google-map

问题描述

我想要做的是在地图上显示从某些移动设备上挑选的位置。
有关位置的数据在那里..

我需要的是在地图上添加标记，具体取决于从服务器接收到的数据。假设我已将位置数据（{Lat，Lang}）设置为状态标记 $ b $ b然后，我怎样才能在地图上显示这个地图。

我的地图代码如下！

 从'react'导入React，{Component};从'google-map-react'导入GoogleMapReact; const AnyReactComponent =（{text}）= > < div> {text}< / div>; class MyClass extends Component {constructor（props）{super（props）; } render（）{return（< GoogleMapReact defaultCenter = {this.props.center} defaultZoom = {this.props.zoom} style = {{height：'300px'}}>< AnyReactComponent lat = {59.955413} lng = {30.337844} text = {'Google Map'} />< / GoogleMapReact>）; }} MyClass.defaultProps = {center：{lat：59.95，lng：30.33}，zoom：11}; export default MyClass;  

此代码来自实现Google maps with react

使用npm包： - google-map-react

解决方案

您可以尝试：

 从'react'导入React，{Component}; 
从'google-map-react'导入GoogleMapReact; 
 
 const AnyReactComponent =（{img_src}）=> < div>< img src = {img_src} className =YOUR-CLASS-NAMEstyle = {{}} />< / div>; 
 
 class MyClass扩展组件{
构造函数（道具）{
 super（道具）; 
 this.state = {
 markers：[]，
} 
} 
 
 componentDidMount（）{
 //或者您可以设置标记列表在其他地方
 //请设置正确的拉特& lng 
 //你可能只对所有标记使用1个图像，如果这样的话删除img_src属性^^ 
 this.setState（{
 markers：[{lat：xxxx，lng：xxxx ，img_src：'YOUR-IMG-SRC'}，{lat：xxxx，lng：xxxx，img_src：'YOUR-IMG-SRC'}，{lat：xxxx，lng：xxxx，img_src：'YOUR-IMG-SRC' }]，
}）; 
} 
 $ b $ render（）{
 return（
< GoogleMapReact 
 defaultCenter = {this.props.center} 
 defaultZoom = { this.props.zoom} 
 style = {{height：'300px'}} 
> 
 {this.state.markers.map（（marker，i）=> {
 return（
< AnyReactComponent 
 lat = {marker.lat} 
ng = {marker.lng} 
 img_src = {marker.img_src} 
 / > 
 
）
}）} 
< / GoogleMapReact> 
）; 
} 
} 
 MyClass.defaultProps = {
 center：{lat：59.95，lng：30.33}，
 zoom：11 
}; 
  

如果有错误，请在此处显示，稍后我们可以修复它。

b
$ b

===========

标记点击事件添加示例

  markerClicked（marker）{
 console.log（被点击的标记是，marker）; 
 //你可以用标记对象做很多事情，请参阅图书馆作者教程的更多内容：
 // https://github.com/istarkov/google-map-react/ blob / master / API.md＃onchildclick-func 
 //看看他们的例子，你可能有一些想法，你也可以在标记上有悬停效果，但它有点复杂我认为
 } 
 $ b $ render（）{
 return（
< GoogleMapReact 
 defaultCenter = {this.props.center} 
 defaultZoom = {this.props。 zoom} 
 style = {{height：'300px'}} 
> 
 {this.state.markers.map（（marker，i）=> {
 return （
< AnyReactComponent 
 lat = {marker.lat} 
 lng = {marker.lng} 
 img_src = {marker.img_src} 
 onChildClick = {this。 markerClicked.bind（this，marker）} 
 /> 
 
）
}）} 
 
< / GoogleMapReact> 
）; 
} 
  

再一次，在这里发布一些错误，如果有的话^^！

What I wan't to do is to show the location picked from some mobile devices on the Map. Data about the locations are there..

What I need here is to add Markers on the map depending on the data received from the server.

Assume I have set the location data ({Lat,Lang}) to the state markers Then How can I add this to show in Map.

My Map Code is as follows!

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

const AnyReactComponent = ({ text }) => <div>{text}</div>;

class MyClass extends Component {
  constructor(props){
    super(props);

  }

  render() {
    return (
      <GoogleMapReact
        defaultCenter={this.props.center}
        defaultZoom={this.props.zoom}
        style={{height: '300px'}}
      >
        <AnyReactComponent
          lat={59.955413}
          lng={30.337844}
          text={'Google Map'}
        />
      </GoogleMapReact>
    );
  }
}
MyClass.defaultProps = {
  center: {lat: 59.95, lng: 30.33},
  zoom: 11
};

export default MyClass;

This Code is from the answer Implementing google maps with react

Used npm package :- google-map-react

解决方案

You may try:

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

const AnyReactComponent = ({  img_src }) => <div><img src={img_src} className="YOUR-CLASS-NAME" style={{}} /></div>;

class MyClass extends Component {
  constructor(props){
    super(props);
    this.state = {
        markers: [],
    }
  }

  componentDidMount(){
    // or you can set markers list somewhere else
    // please also set your correct lat & lng
    // you may only use 1 image for all markers, if then, remove the img_src attribute ^^
    this.setState({
      markers: [{lat: xxxx, lng: xxxx, img_src: 'YOUR-IMG-SRC'},{lat: xxxx, lng: xxxx, img_src: 'YOUR-IMG-SRC' },{lat: xxxx, lng: xxxx,  img_src: 'YOUR-IMG-SRC'}],
    });
  }

  render() {
    return (
      <GoogleMapReact
        defaultCenter={this.props.center}
        defaultZoom={this.props.zoom}
        style={{height: '300px'}}
      >
            {this.state.markers.map((marker, i) =>{
              return(
                <AnyReactComponent
                  lat={marker.lat}
                  lng={marker.lng}
                  img_src={marker.img_src}
                />

              )
            })}      
      </GoogleMapReact>
    );
  }
}
MyClass.defaultProps = {
  center: {lat: 59.95, lng: 30.33},
  zoom: 11
};

If this has error, please show here too, then we can fix it later

===========

ADDED EXAMPLE FOR CLICK-EVENT ON MARKERS

 markerClicked(marker) {
   console.log("The marker that was clicked is", marker);
   // you may do many things with the "marker" object, please see more on tutorial of the library's author:
  // https://github.com/istarkov/google-map-react/blob/master/API.md#onchildclick-func 
  // Look at their examples and you may have some ideas, you can also have the hover effect on markers, but it's a bit more complicated I think 
 }

 render() {
    return (
      <GoogleMapReact
        defaultCenter={this.props.center}
        defaultZoom={this.props.zoom}
        style={{height: '300px'}}
      >
            {this.state.markers.map((marker, i) =>{
              return(
                <AnyReactComponent
                  lat={marker.lat}
                  lng={marker.lng}
                  img_src={marker.img_src}
                  onChildClick={this.markerClicked.bind(this, marker)}
                />

              )
            })}      

      </GoogleMapReact>
    );
  }

Once again, post here some errors if any ^^ !

这篇关于在react-google-map上动态添加标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！