百度地图-React版记录一下百度地图使用遇到的问题。。。官方地址申请 ak ，获取开发者权限在这里创建应用，获取

记录一下百度地图使用遇到的问题。。。

官方地址申请 ak ，获取开发者权限

react-BMapGL or JavaScriptApi

原生 JavaScriptApi

百度地图示例中心有 online code，主要是给 AutoComplete 对象生成的列表添加 onhighlight，onconfirm 事件，核心代码如下：

   <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=your_ak">
   </script>
   	var ac = new BMap.Autocomplete({    //建立一个自动完成的对象
           "input" : "suggestId",
           "location" : map
   });
       
<div id="r-result">请输入:<input type="text" id="suggestId"  size="20" value="百度" style="width:150px;" />
</div>
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>

react-BMapGL

react-BMapGL 的 AutoComponent 把上面的方法进行了封装，开发者只需要关系 input 框即可，我也选择了简洁的方法

<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=your_ak"></script>
<div>
    <input id="ac" />
    <AutoComplete
      input="ac"
      location="北京"
    />
 </div>

按需求选择 api suggestion， place， geo

https://api.map.baidu.com/geocoding/v3/? address=${inputStr} &output=json&ak=your_ak&callback=showLocation

项目里只需要获取到 inputLocation、latitude、longitude，所以用 geo 就够了，
具体还是要看项目需求，我用了半天的 suggestion， place 结果不是很准，
经常返回空数组，后面一想，根本不用那么复杂， geo yyds

请求百度 api 发生跨域问题

请求跨域，用 jsonp 解决，在网上看大家用 fetch-json，试了一下是可以的，还有的说，百度地图那里配白名单是没用的，具体的看看 fetch-json 的使用方法，直接在 res 里是取不到的，下面有详细代码，也可以自行查阅官网

import fetchJsonp from 'fetch-jsonp';

有弹框的时候，遮挡 autoComplete 区域

  .tangram-suggestion-main{
        z-index: 9999;
  }

使用 antd 的下拉框，一直在弹出 autoComplete 区域

网上大概都是这篇文章，也不知道最开始的来源在哪儿，各个社区都有这个文章。。。大概意思就是自己封装了一下，然而我放弃了这次自己封装的机会，直接用了原生的 input 就不会弹出了，然后再加上 antd 的样式【"ant-input"】，就大功告成了。

修改的时候，给 input 框设置默认值，并且添加 onChange 事件

import AutoComplete from 'react-bmapgl/Services/AutoComplete'

    <input id="ac" 
      value={this.state.inputlocation}  // 默认值
      onChange={this.onChangelocation}  // 修改值的事件，新增时不需要
      style={{ width: '70%' }}  
      className="ant-input" />  // 加的样式在这里
    <AutoComplete
      input="ac"
      onConfirm={this.onPickConfirm}
    />
    
    // js 部分
    onChangelocation = (e) => {
     this.setState({
       inputlocation: e.target.value,
     });
   };
   
   onPickConfirm = () => {
    const inputStr = document.getElementById("ac").value;
    console.info("inputStr", inputStr);
    const url = `https://api.map.baidu.com/geocoding/v3/?
    address=${inputStr}
    &output=json&ak=your_ak&callback=showLocation`
    fetchJsonp(url,{
      headers:{ Accept: 'application/json' },
    }).then( response => response.json() )
    .then(data => {
      if( data?.result ){
        const { lat, lng } = data?.result?.location;
        this.setState({
          latitude: lat,
          longitude: lng,
          inputlocation: inputStr,
        })
      }
    })
  }
  --------------------------------------
  package.json 
    "react-bmapgl": "^0.1.28",
    "react-bmap": "^1.0.130",  // 这个或许不需要引入