react通过引入高德地图js的方式来使用高德地图

1.[官网注册账号并申请Key](https://id.amap.com/)
2. 登陆之后，在进入「应用管理」 页面「创建新应用」
3. 为应用添加Key，「服务平台」一项请选择「 Web 端 ( JSAPI ) 」 
<br/>
```
// mapbase.js

// 随机字符串(给callback使用) 
const key = randomStr();

// callback是地图js加载完毕的回调, plugin后面是需要的插件, 多个插件使用 "," 分割 
const mapApiUrl = `http://webapi.amap.com/maps?v=1.4.11&key=${"你申请的key"}&callback=${key}&plugin=AMap.Riding,AMap.GraspRoad,AMap.Autocomplete`;

// 地图ui组件 
const mapUi = 'http://webapi.amap.com/ui/1.0/main-async.js'

// 判断地图js加载完毕 
let scriptOnload = false;

// 订阅器(待初始化地图的方法) 
const onloadFun = [];

// 创建script元素(地图js)追加body标签里 
const UIscript = document.createElement('script');
UIscript.src = mapUi; UIscript.async = 'async';

// 创建script元素(地图ui)追加body标签里 
const script = document.createElement('script'); 
script.src = mapApiUrl; 
script.async = 'async';

// 地图js加载完毕回调函数 
window[key] = () => {  
    scriptOnload = true; 
    onloadFun.forEach(fun => fun()); 
};

// 追加元素 
document.body.appendChild(UIscript); 
document.body.appendChild(script);

// 加载完毕了js地图直接初始化, 否则想订阅器里追加函数 
export default function mapOnLoad(callback) {  
    if (scriptOnload) callback();  
    else onloadFun.push(callback); 
} 
export function isMapOnLoad() {  return scriptOnload; } 
```

在使用的页面导入mapbase.js 
```
import mapOnLoad from 'mapbase.js';

componentDidMount() { 
    // 注意: 这里如果不显示地图的话, 使用定时器0s 
    mapOnLoad(this.init); 
    setTimeOut(()=>{ 
        mapOnLoad(this.init); 
    }, 0) 
} 
init = () => { 
    initAMapUI() 
    const { value } = this.state; 
    this.inited = true; 
    this.map = new window.AMap.Map(this.key, { // 容器id 
    resizeEnable: true, 
    zoom: 12, 
    center: value && value.length ? value : [113.32058, 23.162637] }); 
}

render() { 
    return ( 
         
        <div id={this.key}></div> 
    ) 
} 
```

Leanote's Blog

Navigation

Recent Posts

Friend Links