百度地图API

前面申请创建帐号, 获取ak

使用步骤

1.引入百度地图API的JS文件 ,  替换自己申请好的密钥

  <script
    type="text/javascript"
    src="https://api.map.baidu.com/api?v=1.0&&type=你的密钥"
  ></script>

2.在 index.css 中设置全局样式

html,
body,
#root,
.App {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
}

3. 创建 Map 组件 , 配置路由 . 并在 Map 组件中 , 创建地图容器元素 , 并设置样式 

  // Map 组件 
  <div id="container"></div>

  //设置样式
  .map , #container {
    height : 100%
  }

4. 创建地图实例(在componentDidMount())钩子函数中

const map = new window.BMap.Map("container")

5.设置中心点坐标

const point = new window.BMap.Point(116.404 , 39.915)

6.初始化地图 , 同时设置展示级别

map.centerAndZoom(point , 15)