维帝博客 - 高德地图实现多点标注marker和动态信息窗体

先说一下项目对地图的需求：在后台新增地图管理模块，要求，每一辆车都在地图上有标注，而且点击标注时要显示出车辆的相关信息，比如车牌和车辆的当前状态。

下图就是实现的效果。

![](https://veddy-blog.oss-accelerate.aliyuncs.com/assets/images/article/20211112143848eff92867048a4858b16d66e499b57da3/1.png)

当然从高德地图api也能查看到这一块，比如多点标注，简单信息窗体，这些都有api,可以先看官网的，然后，再看我这篇文章，怎么融合一起，记住数据全部来自后台数据库，这样才能保证一切数据都是动态的，可实时更新的。

首先，定义map,渲染出基础的地图。

```javascript
var map = new AMap.Map('container', {
    resizeEnable: true,
    zoom: 5
});
```

center我就暂时没有定义会自动定位IP的地址获取中心点。接下里需要清除障碍物，全局几个变量，

```javascript
map.clearMap();
var markers = [];
var infoWindow;
```

好的，接下里开始请求数据，数据主要包括坐标点和信息窗体要展示的参数，比如我的有车辆的运单号和车辆状态，车牌号等参数。

```javascript
$.ajax({
 url : "eos_TranOrderFollowing/mapcartrans.do",
 type : "get",
 dataType : "json",
 success : function(e) {
 // var data=[{"fLong":'112.00003','fLati':'38.2345'},{"fLong":'115.00003','fLati':'38.2345'},{"fLong":'114.00003','fLati':'38.2345'},{"fLong":'116.00003','fLati':'38.2345'}];
 // e.data = data;
 var marker;
 for(var i=0 ; i< e.data.length;i++){
 var jfong=[ e.data[i].fLong,e.data[i].fLati];
 marker = new AMap.Marker({
 position: jfong,
 zIndex: 101,
 map:map
 });
 console.log(e.data[3]);
 marker.setMap(map);
 marker.orderON=e.data[i].orderON;
 marker.tranOFID=e.data[i].tranOFID;
 marker.fhadd=e.data[i].fhadd;
 marker.sAdd=e.data[i].sAdd;
 marker.status=e.data[i].status;
 marker.on('click', function(e){
 infoWindow.setContent("<ul class='main'><li> 运单号： "+e.target.orderON+"</li>"
 + "<li> 派车单号: "+e.target.tranOFID+" </li>"
 + "<li> 发货地址: "+e.target.fhadd+" </li>"
 + "<li> 收货地址: "+e.target.sAdd+" </li>"
 + "<li> 车辆状态 : "+e.target.status +" </li></ul>");
 infoWindow.open(map, e.lnglat);
 });
 } // for-end
 infoWindow = new AMap.InfoWindow({
 isCustom:	true,
 draggable: true, //是否可拖动
 offset: new AMap.Pixel(0, -31),
 content:""
 });
 }
}) //	Ajax结束
```

因为，我要展示的marker是很多的，后台返回的数据肯定不止1条，所以通过for循环，拿到所有的坐标，我定义的jfong变量，比如我的就有16个坐标点，然后定义marker，把position = jfong;这样就同样可以获得16个marker点了，然后添加标注图标icon，需要自定义图标的看下官网api很简单的。

```javascript
marker.setMap(map);
```

这样多点的marker就实现了，接下来就是信息窗体了。因为我们需要在信息窗体展示的动态数据是在success：function（E）里面的，也就是在E里面。而点击图标时，执行的function（e）,这个e是高德地图定义的，这里就需要把我们自己的参数赋值到这里面，也就是代码中的   marker.参数名称 = E.data[i].参数名称，通过这样的赋值后，捏可以打印一下（e）看下数据，然后通过e.Target.参数名称   就能够拿到了。信息窗体就不用多说了，把重点的参数赋值说明白就OK啦。我是自定义的信息窗体，通过setContent 动态设置了参数。

毕竟是自定义的信息窗体，所有肯定需要关闭按钮，样式自己随便写，只需要执行关闭自定义信息窗体事件即可

```javascript
function closeInfoWindow() {
    map.clearInfoWindow();
}
```

好了，这样一个多点标注+动态信息窗体就轻松的实现了。