React web端 高德地图引入

1.逆向地理编码(将经度纬度转换地址)时报错10009(USERKEY_PLAT_NOMATCH),明明用的是web端的key值,为什么会报不匹配的bug呢?
可能的原因是:在逆向地理编码的时候用的不是逆向编码的url,正确的url地址如图:
在这里插入图片描述
2.写地理编码时报错:AMap.Geocoder is not a constructor,网上查到的解决方法有:
1)入口index.html文件的引入的script的key值后面加上plugin=AMap.Geocoder
在这里插入图片描述
2)或者是在key值后面接&callback=init
我试了这两种方法都没起作用,想到有可能是调用逆地址转码时GeoCoder实例还没加载完成,所以在MapDemo组件中用了以下方法得以解决:
在这里插入图片描述

// 实例点击事件
mapInstance.on('click', e => {
	const lngLat = `${e.lnglat.getLat()},${e.lnglat.getLng()}`
    console.log('坐标位置:', lngLat);            
    const self = this;
    AMap.plugin('AMap.Geocoder', function() { //eslint-disable-line
        const geocoder = new AMap.Geocoder({});//eslint-disable-line
        geocoder.getAddress([e.lnglat.lng, e.lnglat.lat], (status, result) => {
            console.log('status, result:', status, result);
            if (status === 'complete' && result.info === 'OK') {
                console.log(result.regeocode.formattedAddress);
                self.setState({inputValue: result.regeocode.formattedAddress})
            }
        })
    })   
});

写了一个搜索定位标注,并可以将点击地点的名字回显的demo

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值