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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章