首先是地图组建的使用流程
1.注册Google、高德接口调用的key key是官方api提供的访问权限 各类型的Key不一样
2.引入Google、高德的js库 在html的主页面 引入script js文件路径要加入key的值。
3.配置地图参数，创建地图。 谷歌 高德的初始化稍有不同
传统html页面的地图初始化 官方有文档
在ReactJs组件中，一般页面原始初始化放在componentDidMount()函数中，初始化数据getInitialState中
getInitialState() {
return {
googleConfig: {
center: { lat: 42.872, lng: 3.644 },
zoom: 3
},
gaodeConfig:{
resizeEnable: true,
zoom:11,
center: [116.397428, 39.90923]
}
}
},
componentDidMount() {
new window.google.maps.Map(
this.refs.map1,
this.state.googleConfig
);
new window.AMap.Map(
this.refs.map2,
this.state.gaodeConfig
);
},
这里需要注意的是 react引入官方js库后 我们的对象创建都需要通过window里引入 google AMap（高德）来创建对象 这事react中使用的不同之处
react中我们不能使用getElementById,而是采用refs来渲染页面
render() {
return (
<div className="demo" >
<div className="google" ref="map1" />
<div className="gaode" ref="map2" />
</div>
)}
第一步引入地图 先介绍到这里 项目中可能 会用到的拓展接口 稍后api调用 圈poi范围 添加点击事件 定位等功能再做添加
1.API 点击地图获取点击位置的经纬度
window.google.maps.event.addListener(map_google,'click', function(e) {
alert(e.latLng.lng() + ',' + e.latLng.lat())
})
map_gaode.on('click', function(e) {
alert(e.lnglat.getLng() + ',' + e.lnglat.getLat());
});
谷歌 高德下点击地图获取经纬度的实现 谷歌必须通过maps对象的event对象管理里添加监听事件
而高德 可直接在地图对象上绑定click事件
poi围栏demo实现
1.点击地图添加标记点
map_google.addListener('click', function(e) {
var temp = that.state.positions;
temp.push(e.latLng);
marker_google = new window.google.maps.Marker({
position: e.latLng,
map: map_google
});
markers_google.push(marker_google);
that.setState({
positions:temp
})
});
map_gaode.on('click', function(e) {
var temp = that.state.positions;
temp.push([e.lnglat.getLng() , e.lnglat.getLat()]);
marker_gaode = new window.AMap.Marker({
map: map_gaode,
position:[e.lnglat.getLng() , e.lnglat.getLat()]
});
markers_gaode.push(marker_gaode);
that.setState({
positions:temp
})
});
2.按确认形成多边形围栏
if(key == "gaode"){
if(!polygon_gaode){
var polygonArr = new Array();//多边形覆盖物节点坐标数组
polygonArr = this.state.positions;
polygon_gaode = new window.AMap.Polygon({
path: polygonArr,//设置多边形边界路径
strokeColor: "#FF33FF", //线颜色
strokeOpacity: 0.2, //线透明度
strokeWeight: 3, //线宽
fillColor: "#1791fc", //填充色
fillOpacity: 0.35//填充透明度
});
polygon_gaode.setMap(map_gaode);
this.setState({
positions:[]
})
}
}else if(key == "google"){
if(!polygon_google){
var polygonArr = new Array();//多边形覆盖物节点坐标数组
polygonArr = this.state.positions;
polygon_google = new window.google.maps.Polygon({
paths: polygonArr,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
polygon_google.setMap(map_google);
}
this.setState({
positions:[]
})
}
3.清除标记和多边形围栏
if(key == "gaode"){
map_gaode.remove(markers_gaode);
if(polygon_gaode){
polygon_gaode.setMap(null)
polygon_gaode = null;
}
}else if(key == "google"){
for (var i = 0; i < markers_google.length; i++) {
markers_google[i].setMap(null);
}
markers_google = [];
if(polygon_google){
polygon_google.setMap(null)
polygon_google = null;
}
}
this.setState({
positions:[]
})
网友评论