Code Monkey home page Code Monkey logo

Comments (7)

ioslh avatar ioslh commented on August 21, 2024

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

from react-amap.

yangmingfa avatar yangmingfa commented on August 21, 2024

@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/[email protected]/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>

from react-amap.

ioslh avatar ioslh commented on August 21, 2024

window.AMap 试试。

注意内容排版。

from react-amap.

yangmingfa avatar yangmingfa commented on August 21, 2024

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

from react-amap.

America-first-melon avatar America-first-melon commented on August 21, 2024

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

from react-amap.

ioslh avatar ioslh commented on August 21, 2024

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

from react-amap.

America-first-melon avatar America-first-melon commented on August 21, 2024

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

from react-amap.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.