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

yangmingfa · 2017-09-08T10:01:01Z

react-amap version

OS/Browers version

Reproduction Link

Steps to reproduce

What is Expected?

What is actually happening?

ioslh · 2017-09-08T12:13:52Z

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

yangmingfa · 2017-09-09T01:45:59Z

@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 · 2017-09-09T02:15:29Z

window.AMap 试试。

注意内容排版。

yangmingfa · 2017-09-09T02:22:51Z

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

America-first-melon · 2017-10-25T03:21:38Z

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

ioslh · 2017-10-26T08:51:39Z

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

America-first-melon · 2017-10-31T06:14:20Z

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

ioslh closed this as completed Sep 9, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

yangmingfa commented Sep 8, 2017

ioslh commented Sep 8, 2017

yangmingfa commented Sep 9, 2017 •

edited by ioslh

Loading

ioslh commented Sep 9, 2017

yangmingfa commented Sep 9, 2017

America-first-melon commented Oct 25, 2017

ioslh commented Oct 26, 2017

America-first-melon commented Oct 31, 2017

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

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

Comments

yangmingfa commented Sep 8, 2017

react-amap version

OS/Browers version

Reproduction Link

Steps to reproduce

What is Expected?

What is actually happening?

ioslh commented Sep 8, 2017

yangmingfa commented Sep 9, 2017 • edited by ioslh Loading

ioslh commented Sep 9, 2017

yangmingfa commented Sep 9, 2017

America-first-melon commented Oct 25, 2017

ioslh commented Oct 26, 2017

America-first-melon commented Oct 31, 2017

yangmingfa commented Sep 9, 2017 •

edited by ioslh

Loading