pengdongliang 的个人博客

记录精彩的程序人生

Open Source, Open Mind,
Open Sight, Open Future!
  menu

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

1.官网注册账号并申请Key
2. 登陆之后,在进入「应用管理」 页面「创建新应用」
3. 为应用添加Key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 」

// 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> 
    ) 
} 

标题:react通过引入高德地图js的方式来使用高德地图
作者:pengdongliang
地址:https://www.p0d0.com/articles/2019/06/04/1573740597801.html