React使用高德地图 （高德地图原生）（二）

React使用高德地图，之前介绍的方法是使用react-amap基于React进行封装的地图组件。除了使用这种方法，我们也可以直接使用高德原生的方法进行操作。

地图插件引入

首先script引入这个就不多说了,在项目的html文件里

    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key="你自己的key"&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder"></script>

用到的一下插件、组件什么的，和react-amap使用的方式保持一致。再有不明白的，可以直接去官网与看：https://lbs.amap.com/api/javascript-api/summary

React中的使用

			<div>
			//地图容器外层需要再多一层
				<div style={{width:650,height:255}} ref="container">
        			  </div>
			</div> 

上 面加载地图容器在react使用的是ref，这样我们在componentDidMount()这个生命周期里，就可以去获取到这个元素，并进行地图的初始化操作

componentDidMount() {
      const _this = this
      let content = this.refs.container
      let content1 = '
定位中....
'
      let map = new window.AMap.Map(content,{
          resizeEnable:true,
          zoom:15
      })
 }

地图初始化加载出来后，剩余的一些操作可以参照官网给的API进行处理。我这边也是针对react-amap实现的功能利用高德原生API重新写了一边，代码如下：

import React, {Component} from 'react'
import marker from 'SRC/statics/images/signin/marker2.png'
import classname from 'classnames'
import styles from './index.scss'
import { message } from 'antd'

class MapDetail extends Component {
  constructor (props) {
      super (props)
      this.state = {
          searchContent:'',
      }
  }

  placeSearch = (e) => {
      this.setState({searchContent:e})
  }

  searchPlace = (e) => {
      console.log(1234,e)
  }




  componentDidMount() {
      const _this = this
      let content = this.refs.container
      let content1 = '
定位中....
'
      let map = new window.AMap.Map(content,{
          resizeEnable:true,
          zoom:15
      })
      let geocoder = new window.AMap.Geocoder({
          radius:1000,
          extensions: "all"
      })
      let selectMarker = new window.AMap.Marker({
          icon: marker,
          draggable: true,
          cursor: 'move',
          raiseOnDrag: false,
          topWhenClick: true,
          topWhenMouseOver: true
      })
      let infoWindow = new window.AMap.InfoWindow({
          content:content1,
          offset:new AMap.Pixel(0,-30)
      })
      map.plugin(["AMap.ToolBar", 'AMap.Scale'], function () {
          toolbar = new window.AMap.ToolBar({
              visible: true
          });
          map.addControl(toolbar);
          map.addControl(new window.AMap.Scale());
      })
      map.on('click',function (e) {
          selectMarker.setMap(map)
          selectMarker.setPosition([e.lnglat.getLng(),e.lnglat.getLat()])
          map.setCenter([e.lnglat.getLng(),e.lnglat.getLat()])
          geocoder.getAddress(e.lnglat,function (status,result) {
              if (status === 'complete'&&result.regeocode) {
                  let address = result.regeocode.formattedAddress;
                  let data = result.regeocode.addressComponent
                  let name = data.township +data.street + data.streetNumber
                  infoWindow.setContent('
当前位置:'+ address +'
')
infoWindow.open(map,e.lnglat)
_this.props.changeData(address,'addr')
_this.props.changeData(name,'name')
_this.props.changeData(e.lnglat.lng,'longitude')
_this.props.changeData(e.lnglat.lat,'latitude')
}
})
})
let auto = new window.AMap.Autocomplete({input:'tipinput'})
let place = new window.AMap.PlaceSearch({map:map})
window.AMap.event.addListener(auto,"select",(e)=>{
place.search(e.poi.name)
geocoder.getAddress(e.poi.location,(status,result) => {
if(status == 'complete' && result.regeocode) {
let address = result.regeocode.formattedAddress;
let data = result.regeocode.addressComponent
let name = data.township +data.street + data.streetNumber
infoWindow.setContent('
当前位置:'+ address +'
')
infoWindow.open(map,e.poi.location)
_this.props.changeData(address,'addr')
_this.props.changeData(name,'name')
_this.props.changeData(e.poi.location.lng,'longitude')
_this.props.changeData(e.poi.location.lat,'latitude')
}
})
})
let btn = document.getElementById('search-id')
btn.addEventListener('click',()=>{
let placeSearch = new AMap.PlaceSearch({
pageSize: 5,
pageIndex: 1,
map: map,
})
const placeStr = this.state.searchContent
if(!placeStr) {
message.error('请输入关键字搜索地点~')
return false
}
placeSearch.search(placeStr,(req,res) => {
if(res.poiList && res.poiList.pois[0]){
const {lng,lat} = res.poiList.pois[0].location
console.log('map',map)
selectMarker.setMap(map)
selectMarker.setPosition([lng, lat]);
map.setCenter([lng, lat])
geocoder.getAddress(res.poiList.pois[0].location,(status,result) => {
if(status == 'complete' && result.regeocode) {
let address = result.regeocode.formattedAddress;
let data = result.regeocode.addressComponent
let name = data.township +data.street + data.streetNumber
infoWindow.setContent('
当前位置:'+ address +'
')
infoWindow.open(map,res.poiList.pois[0].location)
_this.props.changeData(address,'addr')
_this.props.changeData(name,'name')
_this.props.changeData(lng,'longitude')
_this.props.changeData(lat,'latitude')
}
})
}else {
message.error('找不到该位置，请尝试添加更准确的关键词，如城市，区域，街道等')
}
})
})
}
render() {
return (
<div>
<div className={styles.serach}>
<input id="tipinput"
className={styles.searchContent}
onChange={(e) => this.placeSearch(e.target.value)}
onKeyDown={(e) => this.searchPlace(e)} />
<i className={classname(styles.serachIcon,"iconfont icon-weibiaoti106")} id="search-id"></i>
</div>
<div style={{width:650,height:255}} ref="container">
</div>
</div>
)
}
}
export default MapDetail

除了一些样式、或者简单的方法除外，都可以直接粘贴复制的。