zoukankan      html  css  js  c++  java
  • 百度地图

    功能:通过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{ 100%;height: 100%;margin:0;font-family:"微软雅黑";}
            #allmap{height:100%;100%;}
            #r-result{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>
    

      

  • 相关阅读:
    python基础五——初识函数
    python基础三——基础数据类型
    Python基础二
    python基础一
    2.配置jenkins
    1.jenkins 安装
    Java8 新特性
    Java8 新特性
    1.什么是 Docker
    idea快捷键
  • 原文地址:https://www.cnblogs.com/xi-li/p/10185445.html
Copyright © 2011-2022 走看看