Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

为什么在created中拿不到AMap的实例,总是报错no defined?求解答,感谢. #41

Closed
yangmingfa opened this issue Sep 8, 2017 · 7 comments

Comments

@yangmingfa
Copy link

react-amap version

OS/Browers version

Reproduction Link

Steps to reproduce

What is Expected?

What is actually happening?

@ioslh
Copy link
Collaborator

ioslh commented Sep 8, 2017

请提供更详细的信息,比如使用的 react-amap 版本,重现的 jsfidddle 链接或者代码之类的。

@yangmingfa
Copy link
Author

yangmingfa commented Sep 9, 2017

@ioslh 版本 "react-amap": "^1.0.3",
code:

import { Map,Marker } from 'react-amap';

const FormItem = Form.Item
const { TextArea } = Input;

class FormInput extends React.Component {
    constructor(){
        super()
        this.state={
            show: false,
            text: '显示地图'
        }
        this.amapEvents = {
            created: (mapInstance) => {
                console.log('高德地图 Map 实例创建成功;如果你要亲自对实例进行操作,可以从这里开始。比如:');
                // AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch'],function(){
                //     var autoOptions = {
                //         city: "北京", //城市,默认全国
                //         input: "tipinput"//使用联想输入的input的id
                //     };
                //     const autocomplete= new AMap.Autocomplete(autoOptions);
                //     var placeSearch = new AMap.PlaceSearch({
                //         city:'北京',
                //         map:mapInstance
                //     })
                //     AMap.event.addListener(autocomplete, "select", function(e){
                //         //TODO 针对选中的poi实现自己的功能
                //         placeSearch.search(e.poi.name)
                //     });
                // });
            }
        };
        this.markerEvents = {
            created: (markerInstance) => {
                console.log('高德地图 Marker 实例创建成功;如果你要亲自对实例进行操作,可以从这里开始。比如:');
                console.log(markerInstance.getPosition());
            }
        }
        this.markerPosition = { longitude: 118.1, latitude: 24.46 };
    }

render函数中:code

<Map amapkey={'我的key'} events={this.mapEvents}>
                                   <Marker position={this.markerPosition} events={this.markerEvents} />
                               </Map>

然后我在created中就会报错 AMap no defined
我是少引入了什么吗 我看你们的列子 也是可以直接用AMap 用页面直接引入script也可以拿到AMap 但是用react 这样import 就是拿不到AMap
用你们提供的列子这种方法就可以拿到AMap的实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app" style="width:500px;height:500px;">
    <example></example>
</div>
<!--<script src="{{ mix('/js/app.js') }}"></script>-->

<script src="https://cdn.bootcss.com/react/15.6.1/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.6.1/react-dom.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/react-amap@0.2.6/dist/react-amap.js"></script>
<script type="text/babel">
    var Map = ReactAMAP.Map;
    var Marker = ReactAMAP.Marker;
    var Markers = ReactAMAP.Markers;

    class MyMap extends React.Component {
        constructor(){
            super();
            const _this = this;
            this.map = null;
            this.marker = null;
            this.geocoder = null;
            this.mapEvents = {
                created(map){
                    _this.map = map;
                    console.log(_this.map)
                    console.log(AMap)
                    AMap.plugin('AMap.Geocoder',() => {
                        _this.geocoder = new AMap.Geocoder({
                            city: "010"//城市,默认:“全国”
                        });
                    })
                },
                click(e){
                    const lnglat = e.lnglat;
                    _this.setState({
                        position: lnglat,
                        currentLocation: 'loading...'
                    });
                    _this.geocoder && _this.geocoder.getAddress(lnglat, (status, result) => {
                        console.log(result);
                        if (status === 'complete'){
                            if (result.regeocode){
                                _this.setState({
                                    currentLocation: result.regeocode.formattedAddress || '未知地点'
                                });
                            } else {
                                _this.setState({
                                    currentLocation: '未知地点'
                                });
                            }
                        } else {
                            _this.setState({
                                currentLocation: '未知地点'
                            });
                        }
                    })
                }
            };
            this.markerEvents = {};
            this.state = {
                position: {longitude: 120, latitude: 30},
                currentLocation: '点击地图'
            }
        }
        render(){
            return <Map center={this.state.position} events={this.mapEvents}>
                <Marker position={this.state.position} events={this.markerEvents}  />
                <div className="location">{this.state.currentLocation}</div>
            </Map>
        }
    }

    ReactDOM.render(<MyMap/>, document.getElementById('app'));
</script>
</body>
</html>

@ioslh
Copy link
Collaborator

ioslh commented Sep 9, 2017

window.AMap 试试。

注意内容排版。

@yangmingfa
Copy link
Author

@ioslh 刚刚在看其他人的问题提问 发现了用window 然后试了下可以了 刚好又看到你回复了 谢谢
好的 早上来回复的比较急 以后会注意 谢谢

@ioslh ioslh closed this as completed Sep 9, 2017
@America-first-melon
Copy link

原因是啥啊 为啥有的时候需要windows.AMap

@ioslh
Copy link
Collaborator

ioslh commented Oct 26, 2017

@America-first-melon 感觉这是 eslint 这样的代码检测工具的报错,为了防止使用未定义的变量带来错误。我用 create-react-app 生成一个应用之后,引入 Map 并且直接使用 AMap(没有 window),控制台会报错,但是代码仍然运行了。

@America-first-melon
Copy link

@ioslh 啊 谢谢 这个插件很好用

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants