如何在React.js中使用Google地图查看邮政地址？

Question

我想在用户注册时保存邮政地址。

所以我考虑 React.js 中的 Google 地图组件。

让我解释一下：

在搜索栏中输入
搜索栏尝试在 Google 地图组件
如果有结果 > 将结果保存在 state

Submit this state in database.
没有则不提交

可能吗？怎么做？

我考虑 Google 地图，但它可以是任何其他东西。

谢谢

Answer 1

你可以通过 ref uncontrolled component/define your own web components 来完成。

将不受控制的组件引用到使用 Google 映射

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB6w_WDy6psJ5HPX15Me1-o6CkS5jTYWnE&libraries=places"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>

<style>
    form {
        width: 300px;
    }

    input {
        width: 100%;
        display: block;
    }

    form div.map {
        width: 100%;
        height: 200px;
        position: relative;
    }

    .error {
        color: red;
    }
</style>
<div id="content"></div>
<script type="text/babel" data-presets="es2015,stage-1,react">
    class Form extends React.Component {
        constructor(props) {
            super(props);
            this.state = {};

        }

        componentDidMount() {
            var map = new google.maps.Map(this.refs.map, {
                zoom: 13,
                center:{lat:23.124467,lng:113.39553899999999}
            });
            let searchBox = new google.maps.places.SearchBox(this.refs.city);

            let marker = {setMap: () => {}};
            searchBox.addListener('places_changed', () => {
                var places = searchBox.getPlaces();
                if (places.length == 0) {
                    return;
                }
                var place = places[0];
                marker.setMap(null);
                marker = new google.maps.Marker({
                    map: map
                });
                map.setZoom(11);
                map.setCenter(place.geometry.location);
                // Set the position of the marker using the place ID and location.
                marker.setPlace({
                    placeId: place.place_id,
                    location: place.geometry.location
                });
                marker.setVisible(true);

                var postalCodes = place.address_components.filter(function (it) { return it.types.indexOf('postal_code') != -1;}).map(function (it) {return it.long_name;});
                this.zipCodeChanged(postalCodes[0]);
            });
        }

        zipCodeChanged = (postalCode) => {
            this.setState({
                city: this.refs.city.value,
                postalCode: postalCode || '',
                error: !postalCode && 'Please choose a detailed address!',
                enabled: postalCode != null
            });
        };

        render() {
            var {postalCode, enabled, city, error}=this.state;
            return (
                    <form>
                        <h2>Choose city to enable form for submit</h2>
                        Postal Code:{error ? <span className="error">{error}</span> : null}
                        <input name="zipcode" value={postalCode} readOnly placeholder="Updated by city input!"/>
                        City:
                        <input name="city" ref="city"/>
                        <div className="map" ref="map"></div>
                        <button type="submit" disabled={!enabled}>Submit</button>
                    </form>
            );
        }
    }

    ReactDOM.render(<Form/>, document.getElementById('content'));
</script>

Answer 2

试试这个包 react-places-autocomplete，它使用 google 个地图 api。

如何在React.js中使用Google地图查看邮政地址？

How to check postal address using Google maps in React.js?

javascript

google-maps

reactjs

react-jsx

将不受控制的组件引用到使用 Google 映射