最近项目中有此需求，react地图组件的开发：
1 输入地址可查询出对应地图位置并标记点
2 能返回经纬度，并提交服务端保存
3 在地图上点击某一点，也能返回对应经纬度和地址信息
4 国内，国外均可使用
经过调研决定，采用谷歌地图和高德地图来封装组件，当渲染地图组件时，先试图请求谷歌map的api，
若能访问则使用谷歌地图，若不能访问，则调用国内高德地图，
框架环境：react+dva+antd+umiJs；其中需要用到prop-types，axios,scriptjs,对应npm安装即可。
具体组件如下：
import React from 'react'
import PropTypes from 'prop-types'
import { Spin } from 'antd';
import axios from 'axios';
import $script from 'scriptjs'
import styles from './AMap.less'
const googleMapSdk='https://maps.googleapis.com/maps/api/js?key=your key';
const gaodeMapSdk='https://webapi.amap.com/maps?v=1.4.2&key=your key';
let map = null;
let marker = null;
let geocoder = null;
let zoomLevel=15;
class AMapModule extends React.Component {
constructor(props){
super(props);
this.state = {
status:0
};
}
componentWillMount(){
if(!window.AMap&&!(window.google&&window.google.maps)){
axios.get(googleMapSdk,{timeout: 1000}).then(res => {
$script( [googleMapSdk],function(a,b){})
}).catch(function (error) {
$script( [gaodeMapSdk],function(a,b){})
});
}
}
componentDidMount(){
let _this=this;
function listenerStorage(){
if(window.AMap||(window.google && window.google.maps)){
if(window.AMap) {
const {lat, lng, getMapAddress} = _this.props;
const latlngxy=[(!lng||lng=='undefined'||lng=='0')?116.397428:lng,(!lat||lat=='undefined'||lat=='0')?39.90923:lat];//默认北京天安门
map = new window.AMap.Map('allmap', {
resizeEnable: true,
center: latlngxy,
zoom: zoomLevel
});
//高德设置语言 ['en', 'zh_en', 'zh_cn']
let mapLang;
if(window.localStorage.getItem('i18n') == 'en_US'){
mapLang = 'en';
}else{
mapLang = 'zh_cn';
}
map.setLang(mapLang);
// 在新中心点添加 marker
marker = new window.AMap.Marker({
map: map,
position: latlngxy
});
map.on('click',function(e){
marker.setPosition(e.lnglat);
window.AMap.service('AMap.Geocoder',function(){//回调函数
//实例化Geocoder
geocoder = new window.AMap.Geocoder({});
geocoder.getAddress(e.lnglat,function(status,result){
if(status === 'complete' && result.info === 'OK'){
const address=result.regeocode.formattedAddress
getMapAddress&&getMapAddress(address);
}
})
})
})
}
if(window.google && window.google.maps){
const {lat, lng, getMapAddress} = _this.props;
const latlngxy=[(!lng||lng=='undefined'||lng=='0')?116.397428:lng,(!lat||lat=='undefined'||lat=='0')?39.90923:lat];//默认北京天安门
var uluru = {lat: parseFloat(latlngxy[1]), lng: parseFloat(latlngxy[0])}; // google need number
initMap()
function initMap() {
map = new window.google.maps.Map(document.getElementById('allmap'), {
resizeEnable: true,
center: uluru,
zoom: zoomLevel
});
// 在新中心点添加 marker
marker = new window.google.maps.Marker({
map: map,
position: uluru
});
}
map.addListener('click',function(e){
let latlng=e.latLng;
marker.setPosition(latlng);
geocoder = new window.google.maps.Geocoder()
geocoder.geocode({'location': latlng}, function(results, status) {
if (status === 'OK') {
const address=results[0].formatted_address
getMapAddress&&getMapAddress(address.substring(0,address.indexOf(' ')));
} else {
console.log('Geocoder failed due to: ' + status);
}
});
})
}
_this.setState({
status:1
})
}else{
setTimeout(function(){
listenerStorage()
},800)
}
}
listenerStorage();
}
componentWillReceiveProps=(nextProps)=>{
const {getMapPoint}=this.props;
if(window.AMap && nextProps.address&&nextProps.address!=this.props.address) {
window.AMap.service('AMap.Geocoder',function(){//回调函数
//实例化Geocoder
geocoder = new window.AMap.Geocoder({});
geocoder.getLocation(nextProps.address, function (status, result) {
if (status === 'complete' && result.info === 'OK') {
let latlng = result.geocodes[0].location;
getMapPoint&&getMapPoint(latlng);
// 设置缩放级别和中心点
let latlngxy = [latlng['lng'],latlng['lat']];
const currentZoom=map.getZoom();
map.setZoomAndCenter(currentZoom!=zoomLevel?currentZoom:zoomLevel, latlngxy);
// 在新中心点添加 marker
marker.setPosition(latlng);
} else {
console.log('search "' + nextProps.address + '" no data')
}
});
});
}
if(window.google && window.google.maps && nextProps.address&&nextProps.address!=this.props.address){
geocoder = new window.google.maps.Geocoder()
geocoder.geocode({'address': nextProps.address}, function(results, status) {
if (status === 'OK') {
let latlng = results[0].geometry.location;
getMapPoint&&getMapPoint({lat:latlng.lat(),lng:latlng.lng()});
map.setCenter(latlng);
// 在新中心点添加 marker
marker.setPosition(latlng);
} else {
console.log('Geocode was not successful for the following reason: ' + status);
}
});
}
}
render(){
const { height } = this.props;
return(
<div className={styles.container} style={{height:height?height:300}}>
<Spin spinning={this.state.status==0?true:false} tip="Loading...">
<div id="allmap" className={styles.mapContainer} style={{height:height?height:300}} />
</Spin>
</div>
)
}
}
AMapModule.propTypes = {
lng: PropTypes.string,
lat: PropTypes.string,
className: PropTypes.string,
}
export default AMapModule
调用如下：
<div style={{width:'500px'}}>
<Form>
<FormItem
label={
<span>
地址
</span>
}>
{getFieldDecorator('position', {
initialValue: '北京'
})(
<Input placeholder={'请输入地址'} />
)}
</FormItem>
<FormItem
label={
<span>
经度
</span>
}>
{getFieldDecorator('longitude', {
initialValue: ''
})(
<Input />
)}
</FormItem>
<FormItem label={
<span>
维度
</span>
}>
{getFieldDecorator('latitude', {
initialValue: ''
})(
<Input/>
)}
</FormItem>
<AMap
lng={''}
lat={''}
address={getFieldValue('position')}
getMapPoint={(point)=>{
setFieldsValue({
latitude: point.lat,
longitude: point.lng
});
}}
getMapAddress={(address)=>{
setFieldsValue({
position: address
});
}}
/>
</Form>
</div>
截图示例如下：
