高德地图API的使用

  |  

前言

为了帮助学友更好的入职滴滴,也为了整理一下之前项目中使用的高德地图的API的使用过程,写一下这篇博客


43



前期准备

注册成为高德地图开发者

百度搜索高德开放平台,进入页面后注册账号,然后登陆。

然后进入控制台,点击应用管理,我的应用。

控制台

点击新建应用,应用名称和应用类型看着取和选。

key

然后点击应用的这个加号按钮,添加key。

addkey

选择服务平台为Web端。

keyresult

这样我们就获得了项目的key

安装并引入amap组件

使用npm install create-react-app -g安装react的脚手架,就像vue-cli一样

使用npx create-react-app 项目名创建一个react项目。

进入项目文件夹后使用npm install react-amap --save命令安装amap组件

项目启动使用npm start命令

到这里我们的前期准备全都结束了

AMap的使用

我这里直接贴index.html,index.js和index.css以及地图组件的代码了,都是最简洁的,具体的地图组件的使用,看文档的示例代码就行了。只要跟着示例代码修改地图组件的代码就行了

index.html

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>高德地图</title>
</head>
<body>
<div id="root"></div>
</body>
</html>

index.js

1
2
3
4
5
6
7
8
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import MapApp from './MapApp';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<MapApp />, document.getElementById('root'));
serviceWorker.unregister();

index.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}

#root {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}

这里我让根div直接铺满了屏幕,可以根据具体需要改

MapApp.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import React from 'react';
import { Map } from 'react-amap';
import './MapApp.css'
class MapApp extends React.Component{
constructor() {
super();
this.state = {
zoom: 14 //地图初始化大小
}
}
render(){
const plugins = [ //需要使用的地图组件
'Scale',
'OverView',
'ControlBar', // v1.1.0 新增
{
name: 'ToolBar',
options: {
visible: true, // 不设置该属性默认就是 true
onCreated(ins){
console.log(ins);
},
},
}
]
//返回地图的html,amapkey为高德的key
return <div class='map'>
<Map amapkey={'57cf0cf0480dbce493bf9837033f8d94'} plugins={plugins} zoom={this.state.zoom}/>
</div>
}
}

export default MapApp;

这个就是我们的地图组件,如果需要跟着示例代码做修改,就改这个文件

MapApp.css

1
2
3
4
.map {
width: 100%;
height: 100%;
}

这里是设置MapApp.js返回的html的样式的地方,这里我设置了地图的大小。我的地图是全部铺满父元素,父元素,也就是id为root的div,也是铺满全屏的,所以地图也是全屏的。可以根据需要改

1
2
3
4
.map {
width: 400px;
height: 400px;
}

注意,地图所绑定的元素的高宽一定要设置,不设置地图就无法展示。


最后,贴上React-Amap组件的官方文档,这个文档教程使用的就是高德地图API。如果要尝试里面的地图组件内容,比如说标点啊,画线啊,设置中心啊什么的,直接照着他的代码改MapApp.js中的MapApp类就行了。

文档地址地址:

https://elemefe.github.io/react-amap/components/map

文章目录
  1. 1. 前期准备
    1. 1.1. 注册成为高德地图开发者
    2. 1.2. 安装并引入amap组件
  2. 2. AMap的使用