Google地圖標記顯示錯誤的位置？

Question

我是React / Google Maps的新手，我只是想基於React js的用戶輸入來做簡單的動態地圖位置指針

但是Google Marker顯示了錯誤的位置。是的，我驗證了lat和api是正確的，但是Marker放置了錯誤。

這是我的代碼

import React from 'react';
import Helmet from 'react-helmet';
import {connect} from 'react-redux';
import {setNotificationStatus} from '../Actions/notification_Actions';
import {getPlaces,getLocation,getLocationfromAPI} from '../Actions/post_Actions'

//code from here


class PostCon extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            suggestionList:[],
            latLong:{lat:0,lng:0},
            locationSugg:[],
            canLocationRender:false,
            calPlacaRender:false,
            LocationClassName:'SearchPlaceRi ',
            LocationTerm:''
        }
        this.handlePlaceChange = this.handlePlaceChange.bind(this);
        this.handleLocationChange = this.handleLocationChange.bind(this);


    }
    handlePlaceChange(e){
        e.preventDefault();
        let searchTerm = e.target.value;
        this.props.getPlaces(searchTerm).then((res) => {
            this.setState({
                suggestionList:res
            })
        })
    }
    handleLocationChange(e){
        e.preventDefault();
        let searchTerm = e.target.value;
        this.setState({
            LocationTerm:searchTerm,
            LocationClassName:'SearchPlaceRi ',
        });
        let convertedTerm = searchTerm.split(" ").join("+");
        // console.log(searchTerm.split(" ").join("+"))
        this.props.getLocationfromAPI(convertedTerm).then((res) => {
            console.log(res.results)
            this.setState({
                locationSugg:res.results,
                canLocationRender:true
            })
        })


    }

    componentDidMount(){
        this.props.triggerNotification(true,"Hello From ");
       new google.maps.Map(this.refs.map, {
            center: this.state.latLong,
            zoom: 1,
           minZoom:1
        });


    }
    updateState(data){
        console.log('Clicked State',data);
        let latLong = {lat:data.geometry.location.lat,lng:data.geometry.location.lat}
        console.log(latLong);
        this.setState({
            latLong
        })
    }
    updateStateForLocation(data) {
        console.log('clicked Location',data);
        let latLong = {lat:data.geometry.location.lat,lng:data.geometry.location.lat}
        // console.log(latLong);
        this.setState({
            LocationClassName:'SearchPlaceRi SelectObject',
            canLocationRender:false,
            LocationTerm:data.formatted_address,


        });
           let map = new google.maps.Map(this.refs.map, {
                center: latLong,
                zoom: 4,

            });
        new google.maps.Marker({
            position: latLong,
            map: map,
            title: 'Hello World!'
        });
        new google.maps.Circle({
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#000',
            fillOpacity: 0.001,
            map: map,
            center: latLong,
            radius: Math.sqrt(603502) * 100
        });



       this.props.triggerNotification(true,"Tag a place");

    }

    render(){
        // console.log(this.state)
        return(
            <div>
                <Helmet
                   title="Make your Plan"
                   link={[
                       {"rel":"stylesheet","href":"/PostCon.css"},
                       {"rel":"stylesheet","href":"https://fonts.googleapis.com/css?family=Quicksand:300,400"},
                       {}
                   ]}
                   meta={[
                       {name:"viewport",content:"width=device-width, initial-scale=1"},
                       {property:"og:type", content:"article"},

                   ]}


                />
            <div className="container">
                <div className="MapContainer">
                    {/*Render A Map*/}
                    <div ref="map" style={{width:'100%',height:'100%'}}>


                    </div>

                </div>
                <div className="DownConFeed">
                    <div className="PosFeed">
                        <div className="PostConStarts">
                            <form>
                                <input type="text" name="title" className="title" placeholder="Title" />
                                <div className="SearchPlaceCOn Selected">
                                    <input onClick={(e) => this.props.triggerNotification(true,"Select the City/Country")} onChange={this.handleLocationChange} value={this.state.LocationTerm} type="text" name="location" className={this.state.LocationClassName} placeholder="Tag Place" />
                                    <input onClick={(e) => this.props.triggerNotification(true,"Select any Place for selected Location")} onChange={this.handlePlaceChange} type="text" name="place" className="SearchPlaceRi" placeholder="Tag Place" />
                                </div>
                                  <div className="Suggestion">
                                     <ul>


                                         {/*{this.state.suggestionList.map(data => {*/}
                                             {/*return (*/}
                                                 {/*<div key={data.place_id} onClick={(e) => this.updateState(data)} className="SingleSugg">*/}
                                                     {/*<h2>Startbuks</h2>*/}
                                                     {/*<span>{data.formatted_address}</span>*/}
                                                 {/*</div>*/}
                                             {/*)*/}
                                         {/*})}*/}

                                         {this.state.canLocationRender ? this.state.locationSugg.map(data => {
                                             return (
                                                 <div key={data.place_id} onClick={(e) => this.updateStateForLocation(data)} className="SingleSugg">

                                                     <h2>{data.formatted_address}</h2>


                                                 </div>
                                             )
                                         }) : ""}
                                     </ul>

                               </div>


                                <textarea placeholder="Say More About this Place" defaultValue={""} />
                                <input className="Price" name="price" type="text" placeholder="Price" />
                                <br />
                                <input type="submit" defaultValue="Add" className="alignSelft" />
                            </form>
                        </div>
                    </div>
                </div>
                <div className="AlreadyAdded">
                    <div className="SingleConTainer">
                        <div className="SingleCard">
                            <div className="SinglePostCon">
                                <div className="PlaceTitle">
                                    <h1>Paris Clinton</h1>
                                    <p className="PriceH">Cyber Hub, DLF Cyber City, Gurgaon</p>
                                </div>
                                <p>EI had already rated the place 5 when i walked in to Midival Punditz playing on a lazy sunday afternoon...this place is love, from its relaxed ambiance, live grill, bar and an array of Wine to the aroma of cheese wafting in the air. We opted for the sunday Buffet, priced at 1500+ taxes. Along with mouth watering delicacies, choice of veg and non-veg and unlimited Wine and other choice of alcohol, yes you read it right, unlimited, the waffles and pancakes are to die for. Our brunch extended for hours on end with wine freely flowing. The bartender makes some really mean martinis. would love to visit again. Though desserts are a bit letdown, yet, #loveditl</p>
                                <div className="PriceN">
                                    <p>300$</p>
                                    <button>Remove</button>
                                </div>
                            </div>
                            <div className="SinglePostCon">
                                <div className="PlaceTitle">
                                    <h1>Paris Clinton</h1>
                                    <p className="PriceH">Cyber Hub, DLF Cyber City, Gurgaon</p>
                                </div>
                                <p>EI had already rated the place 5 when i walked in to Midival Punditz playing on a lazy sunday afternoon...this place is love, from its relaxed ambiance, live grill, bar and an array of Wine to the aroma of cheese wafting in the air. We opted for the sunday Buffet, priced at 1500+ taxes. Along with mouth watering delicacies, choice of veg and non-veg and unlimited Wine and other choice of alcohol, yes you read it right, unlimited, the waffles and pancakes are to die for. Our brunch extended for hours on end with wine freely flowing. The bartender makes some really mean martinis. would love to visit again. Though desserts are a bit letdown, yet, #loveditl</p>
                                <div className="PriceN">
                                    <p>300$</p>
                                </div>
                            </div>
                            <div className="SinglePostCon">
                                <div className="PlaceTitle">
                                    <h1>Paris Clinton</h1>
                                    <p className="PriceH">Cyber Hub, DLF Cyber City, Gurgaon</p>
                                </div>
                                <p>EI had already rated the place 5 when i walked in to Midival Punditz playing on a lazy sunday afternoon...this place is love, from its relaxed ambiance, live grill, bar and an array of Wine to the aroma of cheese wafting in the air. We opted for the sunday Buffet, priced at 1500+ taxes. Along with mouth watering delicacies, choice of veg and non-veg and unlimited Wine and other choice of alcohol, yes you read it right, unlimited, the waffles and pancakes are to die for. Our brunch extended for hours on end with wine freely flowing. The bartender makes some really mean martinis. would love to visit again. Though desserts are a bit letdown, yet, #loveditl</p>
                                <div className="PriceN">
                                    <p>300$</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                <script src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXX">

                </script>


        </div>






        )
    }
}




const mapStateToProps = (state) => {
    return {

    }
};

const mapDispatchToProps = (dispatch) => {
    return{
        triggerNotification :(bool,msg) => dispatch(setNotificationStatus(bool,msg)),
        getPlaces:(term) => dispatch(getPlaces(term)),
        getLocation:(term) => dispatch(getLocation(term)),
        getLocationfromAPI:(term) => dispatch(getLocationfromAPI(term))
    }
};

export default connect(mapStateToProps,mapDispatchToProps)(PostCon) ;

Answer 1

經度設置不正確。 您在此行有一個錯誤

let latLong = {lat:data.geometry.location.lat,lng:data.geometry.location.lat}

您正在將data.geometry.location.lat設置為lat以及lng。

更改data.geometry.location.lat到data.geometry.location.lng而設置的經度

let latLong = {lat:data.geometry.location.lat,lng:data.geometry.location.lng}