功能:通过ajax获取到数据标记在地图上,鼠标移上去显示该标记的信息。

遇到的坑:把创建窗口的代码即cont(name,longi,lati,mark)方法里面的代码放在了for循环中,所有的标记显示的信息都是最后一条数据信息。

解决办法:把创建窗口的代码封装在了方法里,正常显示。

完整代码:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
        #allmap{height:100%;width:100%;}
        #r-result{width:100%;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=H59Qq9DG6l9nm1rF80cMdDRH"></script><!--百度地图API-->
    <title>百度地图</title>
</head>
<body>
    <div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap"); // 创建Map实例
    var point = new BMap.Point(116.404, 39.915); // 创建中心点坐标
    map.centerAndZoom(point, 5); // 设置地图级别(地图缩放级别,数字越大,缩放的范围越大)
   map.enableScrollWheelZoom(); //启用滚轮放大缩小
    //创建信息窗口
    function cont(name,longi,lati,mark){
      var opts = {
        width : 260, //信息窗口宽度
        height: 80, //信息窗口高度
        title : "<b>服务站信息</b>" , //信息窗口标题
        enableMessage:true	//设置允许信息窗发送短息
      };
      var content = '<div><p style="margin:0;line-height:1.5;font-size:13px;">'+name+'<br/>经度:'+longi+'<br/>纬度:'+lati+
              '<br/></p></div>';
      var infoWindow = new BMap.InfoWindow(content,opts); // 创建信息窗口对象
      //添加鼠标滑过时打开自定义信息窗口事件
      mark.addEventListener("mouseover",function () {
        this.openInfoWindow(infoWindow);
      });
      //添加鼠标离开时关闭自定义信息窗口事件
      mark.addEventListener("mouseout",function () {
        this.closeInfoWindow();
      });
    }

    $.ajax({
      async:false,
      cache:true,
      url: "获取位置信息的接口",
      type: 'GET',
      success: function(result){
        if(result != undefined && result.length >0){
          map.centerAndZoom(new BMap.Point(result[0].longitude, result[0].latitude));
          var longitude = [], latitude = [];
          for (var i = 0; i < result.length; i++) {

            var marker = new BMap.Marker(new BMap.Point(data[i].longi,data[i].lati)); // 创建点
            map.addOverlay(marker); //增加点
            cont(data[i].name,data[i].longi,data[i].lati,marker); //调用创建窗口方法

          }
        }
      },
      error:function(e){
        alert("获取信息失败");
      }
    });

</script>

  

posted on 2018-12-27 15:55  多年小白  阅读(138)  评论(0编辑  收藏  举报