Question

我正在试图弄清楚如何将geogle地图“数据”添加到数组中的谷歌地图api。

数据库中的数组 - ＆gt;地理编码器（地理编码器将数组转换为单个对象） - ＆gt;对象回到数组 - ＆gt;数组循环到谷歌地图

从数据库到地理编码器，一切都很好（数据作为一个数组传递，其中包含多个保存每个城市名称的对象）但是一旦数据通过geecoder传递，它就会分别传递每个对象的数组。我假设在这一点上我需要再次将每个对象推入一个数组，然后我循环它们并将lat和long传递给地图。现在，代码如何为每个位置创建一个带有新地图的标记。

 import React from 'react';
 import geocoder from 'google-geocoder';
 import FeedMap from './feedMap.js';
 import { GoogleMap, Marker } from 'react-google-maps';
 import MapLoader from './maploader.js';
 import { default as MarkerClusterer } from "react-google-maps/lib/addons/MarkerClusterer";


var Location = React.createClass({
 getInitialState: function(){
  return {
   petTrip: []
   }
   },

    getAllpetTripFromServer: function(){
     var self = this;
     $.ajax({
     method: 'GET',
     url: '/travel'
     }).done(function(data){
     console.log(data, "I am the data from line 17");
     self.setState({ petTrip: data })
     })
   },

   componentDidMount: function(){
    this.getAllpetTripFromServer();
     },

     render: function(){
      return (
      <div>
        <AllpetTrip petTrip={this.state.petTrip}/>
      </div>
     )
    }

   });

  var AllpetTrip = React.createClass({
   render: function(){
    var trips = this.props.petTrip.map(function(item){
    return <Geolocator start={item.startPoint}/>
    });
   return (
    <div>
    { trips }
    </div>
   )
  }
 });

 var Geolocator = React.createClass({
  getInitialState: function(){
    return {
     location: undefined
    }
    },

   getLocations: function(){
   var locationArr = [];
   var self = this;
   var key = { key: 'AIzaSyC9Zst0uBpxGJ2P4LLv3IMATpN9Ppl4ImI'};
   var coder = geocoder(key);
   var geo = coder.find(this.props.start, function(err, data){
    self.setState({ location: data });
    return data;

    })
    },

   componentDidMount: function(){
   this.getLocations();
   },


   render: function(){

    var startPoints = this.state.geolocations ?  this.state.geolocations.map(function(item){
     return <Marker position={ { lat: item.location.lat, lng:  item.location.lng} } icon={'img/marker.png'}/>
       }) : null;

    return(
    <div id="google-map">
      <MapLoader>
      <GoogleMap
       defaultZoom={4}
       center={{lat: 40., lng: -99.000}}>


      >
        <MarkerClusterer
        averageCenter
        enableRetinaIcons
        gridSize={20}
        >
        { startPoints }
        </MarkerClusterer>
      </GoogleMap>
      </MapLoader>
      </div>

     )
    }

   });

    module.exports = Location;

使用Geocoder的ReactJS谷歌地图与多个标记

0 个答案: