方法一:初始化地图时,渲染好点、点的信息,点击事件就打开信息窗口即可
从接口获取数据,console.log打印之后到控制台查看字段情况,这里坐标的字段为gps
地址逆解析结果判断,当地址不存在(即点在无法解析出来的地方(比如黄海之类),要进行筛选)
- 第二个实际在海中,无法解析出属于省市县,故逆解析出来的地址为空
下面就是函数部分的代码,记得调用函数
getData() {
fetchData().then(res => {
res.data.forEach(item => {
// 循环所有的数据,取出需要用到的字段
if (item.gps) {
// 先判断坐标存在,才能往地图上添加点以及信息窗口,地址逆解析,不然渲染空的坐标点会报错
var lng = item.gps.split(',')[0]
var lat = item.gps.split(',')[1]
var Gps = new BMap.Point(lng, lat)
// 自定义点的样式,Size大小就设置成图片原始大小即可
var myIcon = new BMap.Icon(require('../img/yuanku-small(1).png'), new BMap.Size(26, 38))
var marker = new BMap.Marker(Gps , {
icon: myIcon })
this.map.addOverlay(marker)
var myGeo = new BMap.Geocoder() //