pc版React重构,使用到了高德地图。搜了资料,发现有一个针对React进行封装的地图插件react-amap。官方网址:https://elemefe.github.io/react-amap/components/map,有兴趣的可以看下里面的API。
react-amap 安装
1、使用npm进行安装,目前是1.2.8版本:
cnpm i react-amap
2、直接使用sdn方式引入
<script src="https://unpkg.com/react-amap@0.2.5/dist/react-amap.min.js"></script>
react-amap 使用
import React,{
Component} from 'react'
import {
Map,Marker} from 'react-amap'
const mapKey = '1234567809843asadasd' //需要自己去高德官网上去申请
class Address extends Component {
constructor (props) {
super (props)
this.state = {
}
}
render(){
return (
<div style={
{
width: '100%', height: '400px'}}>
<Map amapkey={
mapKey}
zoom={
15}></Map>
</div>
)
}
}
export default Address
这样的话,就会初始化一个简单的地图。
实际开发过程中,你会有比较复杂的使用场景。比如需要标记点、对地图进行缩放、能够定位到当前位置、位置搜索等等功能。需求大致如下图所示:
这样的话,那就需要引入插件以及组件的概念了。
ToolBar、Scale插件
<Map plugins={
["ToolBar", 'Scale']}></Map>
Marker 地图标记
<Map>
<Marker position={
['lng','lat']}></Marker>
</Map>
InfoWindow 窗体组件
<Map>
<InfoWindow
position={
this.state.position}
visible={
this.state.visible}
isCustom={
false}
content={
html}
size={
this.state.size}
offset={
this.state.offset}
events={
this.windowEvents}
/>
</Map>
通过 created 事件实现更高级的使用需求,在高德原生实例创建成功后调用,参数就是创建的实例;获取到实例之后,就可以根据高德原生的方法对实例进行操作:
const events = {
created: