首先添加默认点,先配置两个静态点的经纬度,这里我用的静态数据
state={
pointlist:[
{lng:"114.52208184",
lat:"38.04895831"},
{lng:"114.62208112",
lat:"38.04895831"}
]
}
添加按钮
<button onClick={this.addpoint}>添加默认样式点</button>
添加方法
addpoint=()=>{
var BMap = window.BMap;
rBmap.centerAndZoom("石家庄", 11); // 设置中心点
//rBmap.centerAndZoom(new BMap.Point(114.52208184,38.04895831), 11); // 设置中心点
var list=this.state.pointlist
list.map((item)=>{
var markers = new BMap.Marker(new BMap.Point(item.lng, item.lat)); //lng为经度,lat为纬度
rBmap.addOverlay(markers);//将标签添加到地图中去
})
}
这样默认地图点就加好了,需要注意的是,添加点以后地图不会自己跳到点的位置,可以手动配置一下。
添加自己设置图片的点
首先添加要配置的图片,react引入图片的方式
import greenicon from "../assets/img/location-green.png"
添加按钮
<button onClick={this.addIconPoint}>添加自定义样式点</button>
添加方法
addIconPoint=()=>{
rBmap.clearOverlays();//清除页面所有的点
var BMap = window.BMap;
rBmap.centerAndZoom("石家庄", 11); // 设置中心点
var list=this.state.pointlist
list.map((item)=>{
var icons =greenicon; //这个是你要显示坐标的图片的相对路径
var markers = new BMap.Marker(new BMap.Point(item.lng, item.lat)); //lng为经度,lat为纬度
var icon = new BMap.Icon(icons, new BMap.Size(55, 55)); //显示图标大小
markers.setIcon(icon);//设置标签的图标为自定义图标
// var icon = markers.getIcon();
// markers.setShadow(icon);//去掉阴影
rBmap.addOverlay(markers);//将标签添加到地图中去
})
}
这里需要注意的,图片一定不能太大,不然就显示不出来了,这样就获取了自定义图片的点。效果如下
然后咱们来自定义一下地图样式,我用的是3.0的版本,就这个版本直接先去百度官网定制样式,地址是
http://lbs.baidu.com/index.php?title=jspopular3.0/guide/custom
定制完成后,会给一个id
在我们的地图初始化的时候配置一下,一定要在初始化完了之后引入,代码如下
componentDidMount(){//要在组件完成后初始化地图
var BMap = window.BMap;//新键地图,用全局window
var map = new BMap.Map("allmap",{ enableMapClick: false }); // 创建Map实例,这边我禁用了鼠标点击事件,可以不设置
rBmap=map;//map实例赋值给全局的一个变量
map.centerAndZoom(new BMap.Point(114.52208184,38.04895831), 11); // 设置中心点
map.enableScrollWheelZoom(true);//设置可以根据鼠标滚动
map.setMapStyleV2({ //添加自定义样式,放到初始化最后
styleId: '30f0c609203a6e029264a7a6a2e39c02'
});
}
这里面有个坑,就是如果你设置中心的时候写城市名的话,就会报错,我换成经纬度就没事儿了。
全部代码如下
import React, { Component } from 'react';
import greenicon from "../assets/img/location-green.png"
var rBmap ={} // 全局Map实例
class maphost extends Component{
state={
pointlist:[
{lng:"114.52208184",
lat:"38.04895831"},
{lng:"114.62208112",
lat:"38.04895831"}
]
}
componentDidMount(){//要在组件完成后初始化地图
var BMap = window.BMap;//新键地图,用全局window
var map = new BMap.Map("allmap",{ enableMapClick: false }); // 创建Map实例,这边我禁用了鼠标点击事件,可以不设置
rBmap=map;//map实例赋值给全局的一个变量
map.centerAndZoom(new BMap.Point(114.52208184,38.04895831), 11); // 设置中心点
map.enableScrollWheelZoom(true);//设置可以根据鼠标滚动
map.setMapStyleV2({ //添加自定义样式,放到初始化最后
styleId: '30f0c609203a6e029264a7a6a2e39c02'
});
}
addpoint=()=>{
var BMap = window.BMap;
rBmap.centerAndZoom("石家庄", 11); // 设置中心点
var list=this.state.pointlist
list.map((item)=>{
var markers = new BMap.Marker(new BMap.Point(item.lng, item.lat)); //lng为经度,lat为纬度
rBmap.addOverlay(markers);//将标签添加到地图中去
})
}
addIconPoint=()=>{
rBmap.clearOverlays();//清除页面所有的点
var BMap = window.BMap;
rBmap.centerAndZoom("石家庄", 11); // 设置中心点
var list=this.state.pointlist
list.map((item)=>{
var icons =greenicon; //这个是你要显示坐标的图片的相对路径
var markers = new BMap.Marker(new BMap.Point(item.lng, item.lat)); //lng为经度,lat为纬度
var icon = new BMap.Icon(icons, new BMap.Size(55, 55)); //显示图标大小
markers.setIcon(icon);//设置标签的图标为自定义图标
// var icon = markers.getIcon();
// markers.setShadow(icon);//去掉阴影
rBmap.addOverlay(markers);//将标签添加到地图中去
})
}
render(){
return (
<div style={{height:'calc(100vh - 80px)'}}>
<button onClick={this.addpoint}>添加默认样式点</button>
<button onClick={this.addIconPoint}>添加自定义样式点</button>
<div id='allmap' style={{ width:'100%',height:'100%' }}></div>
</div>
);
}
}
export default maphost;
效果