动用百度地图完结地图网格,使用百度地图达成地图网格的演示

by admin on 2019年6月1日

前言:近日要动用百度地图完结楼盘可视化的职能,因而最基础的成效正是将地图网格化未来达成不相同地区的楼盘划分;

应用百度地图达成地图网格的言传身教,百度地图网格示例

前言:最近要利用百度地图达成楼盘可视化的魔法,由此最基础的机能就是将地图网格化今后完毕区别地段的楼盘划分;

一,自行去百度地图的开放平台申请秘钥哈,这里自身就把温馨的秘钥贴出来了;ak=A3CklGvnFOjkAzKzay2dySgfdig0GKz4

贰,新建3个归纳页面,下边笔者把本人的页面贴出来

<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <style type="text/css">
  html {
   height: 100%
  }
  body {
   height: 100%;
   margin: 0px;
   padding: 0px
  }
  #container {
   height: 100%
  }
 </style>
 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=A3CklGvnFOjkAzKzay2dySgfdig0GKz4"></script> 
<script type="text/javascript" src="ziroom-map.js"></script>
 </head>
 <body> 
<div id="container"></div>
 <script> 
var myMap = new ZMap("container"); </script>
 </body>
 </html>

三,在那之中引进了ziroom-map.js,那是大家集团的名字呀,作者把代码贴出来,那一个js是包裹了百度的js的api的,有人假如要问为啥封装,直接行使不可能么?那自个儿的答问是:封装能够将具体业务和地图相结合,使代码更清晰,并且能够长久化当前地图的场地,利于达成对地图的操作。

var ZMap = function (id, center, level) {
 this.initCenter = new ZPoint(116.404, 39.915);//初始化的中心点,同时为了定义网格的中心点
 this.id = id;//div的id
 this.level = level ? level : 13;//地图级别
 this.center = center ? center : this.initCenter;//中心点
 this.map = null;//百度地图实例
 this.xgrids = [];//经线
 this.ygrids = [];//纬线
 this.beSelectBounds = {};
 this.bounds = null;//当前地图的四个顶点
 this.span = null;//当前网格的跨度
 this.init();
}
ZMap.prototype = {
 init: function () {//全局初始化
  var zMap = this;
  this.map = new BMap.Map(this.id);
  this.map.centerAndZoom(this.center.point, this.level);
  this.map.enableScrollWheelZoom();
  this.map.disableInertialDragging();
  this.map.addControl(new BMap.NavigationControl({
   anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
   type: BMAP_NAVIGATION_CONTROL_ZOOM
  })); //缩放按钮
  this.map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT, offset: new BMap.Size(80, 25)})); //比例尺
  this.map.disableDoubleClickZoom();
  this.map.setMapStyle({style: 'googlelite'});
  this.initProperty();
  this.initGrid();
  //添加移动后的点击事件
  this.map.addEventListener("dragend", function () {
   zMap.initProperty();
   zMap.initGrid();
  });
  //添加放大或缩小时的事件
  this.map.addEventListener("zoomend", function () {
   zMap.initProperty();
   zMap.initGrid();
  });
  //设置点击事件
  this.map.addEventListener("click", function (e) {
   var point = e.point;
   //获取当前点是在哪个区块内,获取正方形的四个顶点
   var points = zMap.getGrid(point);
   //判断当前区域是否已经被选中过,如果被选中过则取消选中
   var key = '' + points[0].lng + points[0].lat + points[2].lng + points[2].lat;//使用两个点的坐标作为key
   if (zMap.beSelectBounds[key]) {
    zMap.map.removeOverlay(zMap.beSelectBounds[key]);
    delete zMap.beSelectBounds[key];
    return;
   }
   var polygon = new BMap.Polygon(points, {strokeColor: "red", strokeWeight: 2, strokeOpacity: 0.5});
   zMap.map.addOverlay(polygon);
   zMap.beSelectBounds[key] = polygon;
  });
 },
 initProperty: function () {//初始化当前地图的状态
  this.level = this.map.getZoom();
  this.bounds = {
   x1: this.map.getBounds().getSouthWest().lng,
   y1: this.map.getBounds().getSouthWest().lat,
   x2: this.map.getBounds().getNorthEast().lng,
   y2: this.map.getBounds().getNorthEast().lat
  };
  this.span = this.getSpan();//需要使用level属性
 },
 initGrid: function () {//初始化网格
  var zMap = this;
  //将原来的网格线先去掉
  for (var i in zMap.xgrids) {
   this.map.removeOverlay(zMap.xgrids[i]);
  }
  zMap.xgrids = [];
  for (var i in zMap.ygrids) {
   this.map.removeOverlay(zMap.ygrids[i]);
  }
  zMap.ygrids = [];
  //获取当前网格跨度
  var span = zMap.span;
  //初始化地图上的网格
  for (var i = zMap.bounds.x1 + (zMap.initCenter.point.lng - zMap.bounds.x1) % span.x - span.x; i < zMap.bounds.x2 + span.x; i += span.x) {
   var polyline = new BMap.Polyline([
    new BMap.Point(i.toFixed(6), zMap.bounds.y1),
    new BMap.Point(i.toFixed(6), zMap.bounds.y2)
   ], {strokeColor: "black", strokeWeight: 1, strokeOpacity: 0.5});
   zMap.xgrids.push(polyline);
   zMap.map.addOverlay(polyline);
  }
  for (var i = zMap.bounds.y1 + (zMap.initCenter.point.lat - zMap.bounds.y1) % span.y - span.y; i < zMap.bounds.y2 + span.y; i += span.y) {
   var polyline = new BMap.Polyline([
    new BMap.Point(zMap.bounds.x1, i.toFixed(6)),
    new BMap.Point(zMap.bounds.x2, i.toFixed(6))
   ], {strokeColor: "black", strokeWeight: 1, strokeOpacity: 0.5});
   zMap.ygrids.push(polyline);
   zMap.map.addOverlay(polyline);
  }
 },
 getSpan: function () {//获取网格的跨度
  var scale = 0.75;
  var x = 0.00064;
  for (var i = this.level; i < 19; i++) {
   x *= 2;
  }
  var y = parseFloat((scale * x).toFixed(5));
  return {x: x, y: y};
 },
 getGrid: function (point) {//返回当前点在所在区块的四个顶点
  var zMap = this;
  //先找出两条纵线坐标
  var xpoints = this.xgrids.map(function (polyline) {
   return polyline.getPath()[0].lng;
  }).filter(function (lng) {
   return Math.abs(lng - point.lng) <= zMap.span.x;
  }).sort(function (a, b) {
   return a - b;
  }).slice(0, 2);
  //再找出两条横线的坐标
  var ypoints = this.ygrids.map(function (polyline) {
   return polyline.getPath()[0].lat;
  }).filter(function (lat) {
   return Math.abs(lat - point.lat) <= zMap.span.y;
  }).sort(function (a, b) {
   return a - b;
  }).slice(0, 2);
  return [
   new BMap.Point(xpoints[0], ypoints[0]),
   new BMap.Point(xpoints[0], ypoints[1]),
   new BMap.Point(xpoints[1], ypoints[1]),
   new BMap.Point(xpoints[1], ypoints[0])
  ];
 },
 reset: function () {//重置
  this.map.reset();
 }
}
var ZPoint = function (x, y, code) {
 this.code = code;
 this.point = new BMap.Point(x, y);
}

动用百度地图完结地图网格,使用百度地图达成地图网格的演示。小结:好了那篇小说就那样多了,招待大家指正。

以上那篇使用百度地图完成地图网格的言传身教便是小编分享给我们的全体内容了,希望能给我们贰个参阅,也希望大家多多接济帮客之家。

动用百度地图完结地图网格,使用百度地图达成地图网格的演示。
前言:
近期要动用百度地图完成楼盘可视化的效率,由此最基础的成效正是将地图…

序言:近日要运用百度地图达成楼盘可视化的效果,因而最基础的功效正是将地图网格化以往落成分歧地段的楼盘划分;

   
已经很久没更新博客了,因为这段时间直接在上学前端的学识,没那么多日子,写博客也许写文章不但未有钱,写得好幸好说,借使写得糟糕,一些网络喷子,不只有要喷你,搞倒霉还要人身攻击就不佳了。所以写博客的人,脸皮得厚,像小编如此,任凭骂自身千百遍,笔者还是坚贞不屈写,也正是侮辱了哪个人的眼睛,哈哈~小编发觉有一点点做手艺相比较厉害的人,多少都有一些个性,你永恒不知底她如何时候突然就未有在园子里了……

1,自行去百度地图的开放平台申请秘钥哈,这里笔者就把自个儿的秘钥贴出来了;ak=A3CklGvnFOjkAzKzay二dySgfdig0GKz四

壹,自行去百度地图的开放平台申请秘钥哈,这里自身就把团结的秘钥贴出来了;ak=A3CklGvnFOjkAzKzay二dySgfdig0GKz四

  
在行使百度地图此前,大家要先去百度开放平台申请ak。地址:

2,新建3个轻巧易行页面,下边我把温馨的页面贴出来

二,新建2个简短页面,下边作者把温馨的页面贴出来

  必发88 1

<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <style type="text/css">
  html {
   height: 100%
  }
  body {
   height: 100%;
   margin: 0px;
   padding: 0px
  }
  #container {
   height: 100%
  }
 </style>
 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=A3CklGvnFOjkAzKzay2dySgfdig0GKz4"></script> 
<script type="text/javascript" src="ziroom-map.js"></script>
 </head>
 <body> 
<div id="container"></div>
 <script> 
var myMap = new ZMap("container"); </script>
 </body>
 </html>
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style type="text/css">
        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }

        #container {
            height: 100%
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=A3CklGvnFOjkAzKzay2dySgfdig0GKz4"></script> 
<script type="text/javascript" src="ziroom-map.js"></script>
 </head>
 <body> 
<div id="container"></div>
 <script> 
var myMap = new ZMap("container"); </script>
 </body>
 </html>

 填写开拓者认证新闻,你能够以村办名义,也足以以店堂名义申请贰个秘钥,集团开采者认证作用更是有力。在最初做手艺开辟,大家普通以个人名义申请三个秘钥,等随后项目要上线的时候切换来公司的秘钥就可以了。在进展求证的时候,可能会遇见有的标题,比方说:手机号已经登记,那代表,你已经申请过,你能够搜索您曾经申请时使用的百度账号,用特别账号举行登入。有个外人不知底怎么样填写使用境况信息,那项供给写200字以上。小编提供1个德姆o仅供参照他事他说加以考察:

三,个中引入了ziroom-map.js,那是我们合作社的名字呀,笔者把代码贴出来,那些js是包裹了百度的js的api的,有人纵然要问怎么封装,直接动用不能么?那本身的答复是:封装能够将切实工作和地图相结合,使代码更分明,并且能够长久化当前地图的情景,利于完毕对地图的操作。

叁,个中引进了ziroom-map.js,那是大家商家的名字啊,作者把代码贴出来,那个js是包装了百度的js的api的,有人若是要问为啥封装,直接利用无法么?那小编的作答是:封装能够将具体育赛事务和地图相结合,使代码更清晰,并且可以持久化当前地图的情景,利于达成对地图的操作。

我们公司是做物联网节能的,现在公司的项目需要使用到百度地图,前期技术调研,需要先以开发者个人的名义注册一个账号进行开发用,后面会以公司的名义重新申请百度开发者账号,主要用于医院、商场等大型建筑的地图定位以及手机端维修工人的位置定位
,以方便清楚维修工人所在的地理位置。我们希望可以在系统中定位到具体某一座城市的大型建筑,并能够缩放建筑二维平面图的大小,以及定位到使用公司App的运维人员所在的位置,方便安排就近的员工对建筑中需要维修的设备进行维修和保养工作。基于以上的需求,
需要应用到贵公司的百度地图服务,还望批准!不甚感谢!
var ZMap = function (id, center, level) {
 this.initCenter = new ZPoint(116.404, 39.915);//初始化的中心点,同时为了定义网格的中心点
 this.id = id;//div的id
 this.level = level ? level : 13;//地图级别
 this.center = center ? center : this.initCenter;//中心点
 this.map = null;//百度地图实例
 this.xgrids = [];//经线
 this.ygrids = [];//纬线
 this.beSelectBounds = {};
 this.bounds = null;//当前地图的四个顶点
 this.span = null;//当前网格的跨度
 this.init();
}
ZMap.prototype = {
 init: function () {//全局初始化
  var zMap = this;
  this.map = new BMap.Map(this.id);
  this.map.centerAndZoom(this.center.point, this.level);
  this.map.enableScrollWheelZoom();
  this.map.disableInertialDragging();
  this.map.addControl(new BMap.NavigationControl({
   anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
   type: BMAP_NAVIGATION_CONTROL_ZOOM
  })); //缩放按钮
  this.map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT, offset: new BMap.Size(80, 25)})); //比例尺
  this.map.disableDoubleClickZoom();
  this.map.setMapStyle({style: 'googlelite'});
  this.initProperty();
  this.initGrid();
  //添加移动后的点击事件
  this.map.addEventListener("dragend", function () {
   zMap.initProperty();
   zMap.initGrid();
  });
  //添加放大或缩小时的事件
  this.map.addEventListener("zoomend", function () {
   zMap.initProperty();
   zMap.initGrid();
  });
  //设置点击事件
  this.map.addEventListener("click", function (e) {
   var point = e.point;
   //获取当前点是在哪个区块内,获取正方形的四个顶点
   var points = zMap.getGrid(point);
   //判断当前区域是否已经被选中过,如果被选中过则取消选中
   var key = '' + points[0].lng + points[0].lat + points[2].lng + points[2].lat;//使用两个点的坐标作为key
   if (zMap.beSelectBounds[key]) {
    zMap.map.removeOverlay(zMap.beSelectBounds[key]);
    delete zMap.beSelectBounds[key];
    return;
   }
   var polygon = new BMap.Polygon(points, {strokeColor: "red", strokeWeight: 2, strokeOpacity: 0.5});
   zMap.map.addOverlay(polygon);
   zMap.beSelectBounds[key] = polygon;
  });
 },
 initProperty: function () {//初始化当前地图的状态
  this.level = this.map.getZoom();
  this.bounds = {
   x1: this.map.getBounds().getSouthWest().lng,
   y1: this.map.getBounds().getSouthWest().lat,
   x2: this.map.getBounds().getNorthEast().lng,
   y2: this.map.getBounds().getNorthEast().lat
  };
  this.span = this.getSpan();//需要使用level属性
 },
 initGrid: function () {//初始化网格
  var zMap = this;
  //将原来的网格线先去掉
  for (var i in zMap.xgrids) {
   this.map.removeOverlay(zMap.xgrids[i]);
  }
  zMap.xgrids = [];
  for (var i in zMap.ygrids) {
   this.map.removeOverlay(zMap.ygrids[i]);
  }
  zMap.ygrids = [];
  //获取当前网格跨度
  var span = zMap.span;
  //初始化地图上的网格
  for (var i = zMap.bounds.x1 + (zMap.initCenter.point.lng - zMap.bounds.x1) % span.x - span.x; i < zMap.bounds.x2 + span.x; i += span.x) {
   var polyline = new BMap.Polyline([
    new BMap.Point(i.toFixed(6), zMap.bounds.y1),
    new BMap.Point(i.toFixed(6), zMap.bounds.y2)
   ], {strokeColor: "black", strokeWeight: 1, strokeOpacity: 0.5});
   zMap.xgrids.push(polyline);
   zMap.map.addOverlay(polyline);
  }
  for (var i = zMap.bounds.y1 + (zMap.initCenter.point.lat - zMap.bounds.y1) % span.y - span.y; i < zMap.bounds.y2 + span.y; i += span.y) {
   var polyline = new BMap.Polyline([
    new BMap.Point(zMap.bounds.x1, i.toFixed(6)),
    new BMap.Point(zMap.bounds.x2, i.toFixed(6))
   ], {strokeColor: "black", strokeWeight: 1, strokeOpacity: 0.5});
   zMap.ygrids.push(polyline);
   zMap.map.addOverlay(polyline);
  }
 },
 getSpan: function () {//获取网格的跨度
  var scale = 0.75;
  var x = 0.00064;
  for (var i = this.level; i < 19; i++) {
   x *= 2;
  }
  var y = parseFloat((scale * x).toFixed(5));
  return {x: x, y: y};
 },
 getGrid: function (point) {//返回当前点在所在区块的四个顶点
  var zMap = this;
  //先找出两条纵线坐标
  var xpoints = this.xgrids.map(function (polyline) {
   return polyline.getPath()[0].lng;
  }).filter(function (lng) {
   return Math.abs(lng - point.lng) <= zMap.span.x;
  }).sort(function (a, b) {
   return a - b;
  }).slice(0, 2);
  //再找出两条横线的坐标
  var ypoints = this.ygrids.map(function (polyline) {
   return polyline.getPath()[0].lat;
  }).filter(function (lat) {
   return Math.abs(lat - point.lat) <= zMap.span.y;
  }).sort(function (a, b) {
   return a - b;
  }).slice(0, 2);
  return [
   new BMap.Point(xpoints[0], ypoints[0]),
   new BMap.Point(xpoints[0], ypoints[1]),
   new BMap.Point(xpoints[1], ypoints[1]),
   new BMap.Point(xpoints[1], ypoints[0])
  ];
 },
 reset: function () {//重置
  this.map.reset();
 }
}
var ZPoint = function (x, y, code) {
 this.code = code;
 this.point = new BMap.Point(x, y);
}
var ZMap = function (id, center, level) {
    this.initCenter = new ZPoint(116.404, 39.915);//初始化的中心点,同时为了定义网格的中心点
    this.id = id;//div的id
    this.level = level ? level : 13;//地图级别
    this.center = center ? center : this.initCenter;//中心点

    this.map = null;//百度地图实例
    this.xgrids = [];//经线
    this.ygrids = [];//纬线
    this.beSelectBounds = {};
    this.bounds = null;//当前地图的四个顶点
    this.span = null;//当前网格的跨度

    this.init();

}
ZMap.prototype = {
    init: function () {//全局初始化
        var zMap = this;
        this.map = new BMap.Map(this.id);
        this.map.centerAndZoom(this.center.point, this.level);
        this.map.enableScrollWheelZoom();
        this.map.disableInertialDragging();
        this.map.addControl(new BMap.NavigationControl({
            anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
            type: BMAP_NAVIGATION_CONTROL_ZOOM
        })); //缩放按钮
        this.map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT, offset: new BMap.Size(80, 25)})); //比例尺
        this.map.disableDoubleClickZoom();
        this.map.setMapStyle({style: 'googlelite'});
        this.initProperty();
        this.initGrid();

        //添加移动后的点击事件
        this.map.addEventListener("dragend", function () {
            zMap.initProperty();
            zMap.initGrid();
        });
        //添加放大或缩小时的事件
        this.map.addEventListener("zoomend", function () {
            zMap.initProperty();
            zMap.initGrid();
        });
        //设置点击事件
        this.map.addEventListener("click", function (e) {
            var point = e.point;
            //获取当前点是在哪个区块内,获取正方形的四个顶点
            var points = zMap.getGrid(point);

            //判断当前区域是否已经被选中过,如果被选中过则取消选中
            var key = '' + points[0].lng + points[0].lat + points[2].lng + points[2].lat;//使用两个点的坐标作为key
            if (zMap.beSelectBounds[key]) {
                zMap.map.removeOverlay(zMap.beSelectBounds[key]);
                delete zMap.beSelectBounds[key];
                return;
            }
            var polygon = new BMap.Polygon(points, {strokeColor: "red", strokeWeight: 2, strokeOpacity: 0.5});
            zMap.map.addOverlay(polygon);
            zMap.beSelectBounds[key] = polygon;

        });
    },
    initProperty: function () {//初始化当前地图的状态
        this.level = this.map.getZoom();
        this.bounds = {
            x1: this.map.getBounds().getSouthWest().lng,
            y1: this.map.getBounds().getSouthWest().lat,
            x2: this.map.getBounds().getNorthEast().lng,
            y2: this.map.getBounds().getNorthEast().lat
        };
        this.span = this.getSpan();//需要使用level属性
    },
    initGrid: function () {//初始化网格
        var zMap = this;
        //将原来的网格线先去掉
        for (var i in zMap.xgrids) {
            this.map.removeOverlay(zMap.xgrids[i]);
        }
        zMap.xgrids = [];
        for (var i in zMap.ygrids) {
            this.map.removeOverlay(zMap.ygrids[i]);
        }
        zMap.ygrids = [];
        //获取当前网格跨度
        var span = zMap.span;
        //初始化地图上的网格
        for (var i = zMap.bounds.x1 + (zMap.initCenter.point.lng - zMap.bounds.x1) % span.x - span.x; i < zMap.bounds.x2 + span.x; i += span.x) {
            var polyline = new BMap.Polyline([
                new BMap.Point(i.toFixed(6), zMap.bounds.y1),
                new BMap.Point(i.toFixed(6), zMap.bounds.y2)
            ], {strokeColor: "black", strokeWeight: 1, strokeOpacity: 0.5});
            zMap.xgrids.push(polyline);
            zMap.map.addOverlay(polyline);
        }
        for (var i = zMap.bounds.y1 + (zMap.initCenter.point.lat - zMap.bounds.y1) % span.y - span.y; i < zMap.bounds.y2 + span.y; i += span.y) {
            var polyline = new BMap.Polyline([
                new BMap.Point(zMap.bounds.x1, i.toFixed(6)),
                new BMap.Point(zMap.bounds.x2, i.toFixed(6))
            ], {strokeColor: "black", strokeWeight: 1, strokeOpacity: 0.5});
            zMap.ygrids.push(polyline);
            zMap.map.addOverlay(polyline);
        }
    },
    getSpan: function () {//获取网格的跨度
        var scale = 0.75;
        var x = 0.00064;
        for (var i = this.level; i < 19; i++) {
            x *= 2;
        }
        var y = parseFloat((scale * x).toFixed(5));
        return {x: x, y: y};
    },
    getGrid: function (point) {//返回当前点在所在区块的四个顶点
        var zMap = this;
        //先找出两条纵线坐标
        var xpoints = this.xgrids.map(function (polyline) {
            return polyline.getPath()[0].lng;
        }).filter(function (lng) {
            return Math.abs(lng - point.lng) <= zMap.span.x;
        }).sort(function (a, b) {
            return a - b;
        }).slice(0, 2);

        //再找出两条横线的坐标
        var ypoints = this.ygrids.map(function (polyline) {
            return polyline.getPath()[0].lat;
        }).filter(function (lat) {
            return Math.abs(lat - point.lat) <= zMap.span.y;
        }).sort(function (a, b) {
            return a - b;
        }).slice(0, 2);

        return [
            new BMap.Point(xpoints[0], ypoints[0]),
            new BMap.Point(xpoints[0], ypoints[1]),
            new BMap.Point(xpoints[1], ypoints[1]),
            new BMap.Point(xpoints[1], ypoints[0])
        ];

    },
    reset: function () {//重置
        this.map.reset();
    }
}

var ZPoint = function (x, y, code) {
    this.code = code;
    this.point = new BMap.Point(x, y);
}

填写完认证消息之后,3三个事业日以内,就能够考查,审查通过后,你就足以去创立应用了。

总计:好了这篇小说就像此多了,迎接大家指正。

必发88,小结:好了这篇小说就那样多了,欢迎大家指正。

必发88 2

以上那篇使用百度地图完结地图网格的言传身教正是笔者分享给大家的全体内容了,希望能给大家多少个参阅,也指望我们多多支持脚本之家。

 

尽管你是BS项目中运用,你的运用项目采用“浏览器端”

您大概感兴趣的稿子:

  • 百度地图API使用办法详解
  • Android百度地图应用之大旨地图功用完成

 必发88 3

用百度地图生成器,去变通代码,地址:

将转移的代码,直接复制粘贴到项目页面中就可以利用,可是变化的代码毕竟是生成的,你须求自身举办重构。

您还足以去百度API示例中去搜索例子,然后进行修改,更换成你需求的楷模。地址:

万壹作者要做成下边包车型客车职能:

必发88 4

能够看来是要增添五个覆盖物,注意,那不是新闻窗口,因为音信窗口只好在页面中显得三个,而且选拔消息窗口有三个很蛋疼的工作,那正是音讯窗口的蝇头宽度是250px,你不可能修改。

在母版页中添加百度api引用

    <script type="text/javascript" src="http://api.map.baidu.com/api?ak=你的秘钥&v=2.0"></script>

亟需留意的是要在jquery.js以前引用,不然会有争辨。

View视图代码如下:

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Form.cshtml";
}
<!--引用百度地图API-->
<div style="margin-bottom:5px;">
    <input class="form-control input-inline" id="txtWords" placeholder="搜索地区" value="" type="text" />
    <button id="btnSearch" class="btn sbold yellow-casablanca" onclick="searchMap();">
        <i class="fa fa-search"></i>搜索地图
    </button>
</div>
<!--百度地图容器-->
<div style="width:697px;height:550px;border:#ccc solid 1px;" id="mapContent"></div>
@section scripts
{
<script src="~/Content/js/common/base-BaiduMap.js"></script>
    <script type="text/javascript">
    //标注点数组
    var markerArr = [
    {
        title: "紫衡技术", electricity: "0kwh", water: "1吨", air: "0m³", alarm: "2次", point: "114.011944|22.602072", isOnline: 0
    },
    {
        title: "银谷科技", electricity: "10kwh", water: "2吨", air: "30m³", alarm: "1次", point: "114.011086|22.601413", isOnline: 0
    }
    ];
    BaiduMapObj.init("mapContent", 114.011944, 22.602072, markerArr,19);//创建和初始化地图
    function searchMap(){
        BaiduMapObj.searchMap("mapContent","txtWords",markerArr);
    }
    </script>
}

css样式作者放到独立的体制文件中,通过母版页进行引进

/*--------------百度地图----------------*/
.iw_poi_title {
    color: white;
    font-size: 14px;
    font-weight: bold;
    overflow: hidden;
    padding-right: 13px;
    white-space: nowrap;
}
.iw_poi_content {
    font: 12px arial,sans-serif;
    overflow: visible;
    padding-top: 4px;
    white-space: -moz-pre-wrap;
    word-wrap: break-word;
}
.OverlayInsideDiv{position:absolute;height:140px;width:130px;overflow:hidden;opacity:0.9;}
.OverlayInsideDiv p{ margin: 5px 0 0;padding: 0;color:#3B9B8B;}
.OverlayInsideDiv p span{color:#8B8E93;}

快要利用的js进行李包裹装,base-BaiduMap.js代码如下:

必发88 5必发88 6

// ajax加载调试用
//# sourceURL=base-BaiduMap.js

//BaiduMapObj 百度地图扩展--created by zouqj 2017-8-24
var BaiduMapObj = (function () {
    var map = null;
    var iconObj = { w: 21, h: 21, l: 0, t: 0, x: 6, lb: 5 }
    //创建一个Icon
    var createIcon = function (json) {
        var icon = new BMap.Icon("http://map.baidu.com/image/us_mk_icon.png", new BMap.Size(json.w, json.h), { imageOffset: new BMap.Size(-json.l, -json.t), infoWindowOffset: new BMap.Size(json.lb + 5, 1), offset: new BMap.Size(json.x, json.h) })
        return icon;
    }
    //搜索地区(地区)
    this.searchMap = function (id, txtWords, markerArr) {
        var area = document.getElementById(txtWords).value; //得到地区
        var ls = new BMap.LocalSearch(map);
        ls.setSearchCompleteCallback(function (rs) {
            if (ls.getStatus() == BMAP_STATUS_SUCCESS) {
                var poi = rs.getPoi(0);
                if (poi) {
                    BaiduMapObj.init(id, poi.point.lng, poi.point.lat, markerArr);
                }
            }
        });
        ls.search(area);
    };
    //创建地图函数:
    this.createMap=function(id,x, y, _level) {
        var map = new BMap.Map(id);//在百度地图容器中创建一个地图
        var point = new BMap.Point(x, y);//定义一个中心点坐标
        map.centerAndZoom(point, _level);//设定地图的中心点和坐标并将地图显示在地图容器中
        return map;
    }
    //地图事件设置函数:
    this.setMapEvent = function (map) {
        map.enableDragging();//启用地图拖拽事件,默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
    }
    //地图控件添加函数:
    this.addMapControl = function (map) {
        //向地图中添加缩放控件
        var ctrl_nav = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });
        map.addControl(ctrl_nav);
        //向地图中添加缩略图控件
        var ctrl_ove = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 });
        map.addControl(ctrl_ove);
        //向地图中添加比例尺控件
        var ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
        map.addControl(ctrl_sca);
    }
    //创建marker
    this.addMarker = function (map,markerArr) {
        for (var i = 0; i < markerArr.length; i++) {
            var json = markerArr[i];
            var p0 = json.point.split("|")[0];
            var p1 = json.point.split("|")[1];
            var point = new BMap.Point(p0, p1);
            //var iconImg = createIcon(icon);
            var marker = new BMap.Marker(point);//创建图标 , { icon: iconImg }
            //var iw = createInfoWindow(i);
            var label = new BMap.Label(json.title, { "offset": new BMap.Size(iconObj.lb - iconObj.x + 10, -20) });
            marker.setLabel(label);
            map.addOverlay(marker);
            marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
            label.setStyle({
                borderColor: "#808080",
                color: "#333",
                cursor: "pointer",
                border: "0px",
                'background-color': ""
            });

            //(function () {
            //    var index = i;
            //    var _iw = createInfoWindow(i);
            //    var _marker = marker;
            //    _marker.addEventListener("click", function () {
            //        this.openInfoWindow(_iw);
            //    });
            //    _iw.addEventListener("open", function () {
            //        _marker.getLabel().hide();
            //    })
            //    _iw.addEventListener("close", function () {
            //        _marker.getLabel().show();
            //    })
            //    label.addEventListener("click", function () {
            //        _marker.openInfoWindow(_iw);
            //    })
            //    if (!!json.isOpen) {
            //        label.hide();
            //        _marker.openInfoWindow(_iw);
            //    }
            //    _marker.openInfoWindow(_iw);
            //})()
        }
    }
    // 复杂的自定义覆盖物
    function ComplexCustomOverlay(point, text, mouseoverText) {
        this._point = point;
        this._text = text;
        if (mouseoverText != undefined) {
            this._overText = mouseoverText;
        }
    }
    //创建覆盖物
    this.addOverLay = function (map,markerArr) {
        ComplexCustomOverlay.prototype = new BMap.Overlay();
        ComplexCustomOverlay.prototype.initialize = function (map) {
            this._map = map;
            var div = this._div = document.createElement("div");
            div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);

            var arrow = this._arrow = document.createElement("div");
            div.className = "OverlayInsideDiv";
            arrow.style.position = "absolute";
            arrow.style.top = "10px";
            arrow.style.left = "10px";
            arrow.innerHTML = this._text;
            div.appendChild(arrow);

            div.style.backgroundColor = "#313642";
            arrow.style.backgroundPosition = "0px 0px";
            map.getPanes().labelPane.appendChild(div);

            return div;
        }
        ComplexCustomOverlay.prototype.draw = function () {
            var map = this._map;
            var pixel = map.pointToOverlayPixel(this._point);
            this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
            this._div.style.top = pixel.y - 30 + "px";
        }
        for (var i = 0; i < markerArr.length; i++) {
            var json = markerArr[i];
            var p0 = json.point.split("|")[0];
            var p1 = json.point.split("|")[1];
            var txt = "<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><p>电耗:" + json.electricity
                + "<p>水耗:" + json.water + "</p><p>气耗:" + json.air + "</p><p>报警:" + json.alarm + "</p>";
            var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(p0, p1), txt);
            map.addOverlay(myCompOverlay);
        }
    }
    //初始化(地图容器id,中心点坐标x,y,标注点数组,[地图等级:默认19])
    this.init = function (id,x, y, markerArr, level) {
        var _level = level == undefined ? 19 : level;
        map = BaiduMapObj.createMap(id, x, y, _level);
        BaiduMapObj.setMapEvent(map);//设置地图事件
        BaiduMapObj.addMapControl(map);//向地图添加控件
        BaiduMapObj.addMarker(map,markerArr);//向地图中添加marker
        BaiduMapObj.addOverLay(map,markerArr);//向地图中添加覆盖物
    }
    return this;
}).call({});

View Code

您会意识在js代码的最顶上部分,笔者加多了如下代码:

//# sourceURL=base-BaiduMap.js

那是因为本身项目是行使ajax布局,动态加载页面和页面包车型地铁js的,所以1旦你不增加此代码,在浏览器军长不可能展开调和,因为浏览器的调节和测试器上校看不到那几个动态加载进来的js文件。sourceULX570L=后边的是别称,经常和文书名同样方便分别。把那一个功用模块的js全体包裹到三个指标中,那样就只暴光了1个全局变量入口。小编前端js那1块很戳,被以前集团的前端说“基础太差”,所以大家将就着看,毕竟自个儿未来依旧2个准初级前端程序猿……

那事实上是太简单了,没什么好讲的,只是有好几,大家在写代码的历程中,尽量做到永不再一次你的代码,那是最最核心的尺码。

实际上,使用部分第二方的API,真的很简短,你只供给先大致过一次API文书档案,知道它能做什么样,然后您需求哪方面包车型地铁机能,就再相当细看一下那块的作用文书档案和演示,然后本人照着改就足以了。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图