js实现百度地图同时显示多个路书效果

本文介绍了js实现百度地图同时显示多个路书效果,主要是以自行车的还车地点作为实例,具体代码如下:

启动路书:

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=自己的ak"></script>
<script type="text/javascript" src="js/lushu.js"></script><!--路书 -->
var BMapLib = window.BMapLib = BMapLib || {};
(function() {
  var b, a = b = a || {
    version : "1.5.0"
  };
  a.guid = "$BAIDU$";
  (function() {
    window[a.guid] = window[a.guid] || {};
    a.dom = a.dom || {};
    a.dom.g = function(e) {
      if ("string" == typeof e || e instanceof String) {
        return document.getElementById(e)
      } else {
        if (e && e.nodeName && (e.nodeType == 1 || e.nodeType == 9)) {
          return e
        }
      }
      return null
    };
    a.g = a.G = a.dom.g;
    a.lang = a.lang || {};
    a.lang.isString = function(e) {
      return "[object String]" == Object.prototype.toString.call(e)
    };
    a.isString = a.lang.isString;
    a.dom._g = function(e) {
      if (a.lang.isString(e)) {
        return document.getElementById(e)
      }
      return e
    };
    a._g = a.dom._g;
    a.dom.getDocument = function(e) {
      e = a.dom.g(e);
      return e.nodeType == 9 ? e : e.ownerDocument || e.document
    };
    a.browser = a.browser || {};
    a.browser.ie = a.ie = /msie (\d+\.\d+)/i.test(navigator.userAgent) ? (document.documentMode || +RegExp["\x241"])
        : undefined;
    a.dom.getComputedStyle = function(f, e) {
      f = a.dom._g(f);
      var h = a.dom.getDocument(f), g;
      if (h.defaultView && h.defaultView.getComputedStyle) {
        g = h.defaultView.getComputedStyle(f, null);
        if (g) {
          return g[e] || g.getPropertyValue(e)
        }
      }
      return ""
    };
    a.dom._styleFixer = a.dom._styleFixer || {};
    a.dom._styleFilter = a.dom._styleFilter || [];
    a.dom._styleFilter.filter = function(f, j, k) {
      for (var e = 0, h = a.dom._styleFilter, g; g = h[e]; e++) {
        if (g = g[k]) {
          j = g(f, j)
        }
      }
      return j
    };
    a.string = a.string || {};
    a.string.toCamelCase = function(e) {
      if (e.indexOf("-") < 0 && e.indexOf("_") < 0) {
        return e
      }
      return e.replace(/[-_][^-_]/g, function(f) {
        return f.charAt(1).toUpperCase()
      })
    };
    a.dom.getStyle = function(g, f) {
      var i = a.dom;
      g = i.g(g);
      f = a.string.toCamelCase(f);
      var h = g.style[f] || (g.currentStyle ? g.currentStyle[f] : "")
          || i.getComputedStyle(g, f);
      if (!h) {
        var e = i._styleFixer[f];
        if (e) {
          h = e.get ? e.get(g) : a.dom.getStyle(g, e)
        }
      }
      if (e = i._styleFilter) {
        h = e.filter(f, h, "get")
      }
      return h
    };
    a.getStyle = a.dom.getStyle;
    a.dom._NAME_ATTRS = (function() {
      var e = {
        cellpadding : "cellPadding",
        cellspacing : "cellSpacing",
        colspan : "colSpan",
        rowspan : "rowSpan",
        valign : "vAlign",
        usemap : "useMap",
        frameborder : "frameBorder"
      };
      if (a.browser.ie < 8) {
        e["for"] = "htmlFor";
        e["class"] = "className"
      } else {
        e.htmlFor = "for";
        e.className = "class"
      }
      return e
    })();
    a.dom.setAttr = function(f, e, g) {
      f = a.dom.g(f);
      if ("style" == e) {
        f.style.cssText = g
      } else {
        e = a.dom._NAME_ATTRS[e] || e;
        f.setAttribute(e, g)
      }
      return f
    };
    a.setAttr = a.dom.setAttr;
    a.dom.setAttrs = function(g, e) {
      g = a.dom.g(g);
      for ( var f in e) {
        a.dom.setAttr(g, f, e[f])
      }
      return g
    };
    a.setAttrs = a.dom.setAttrs;
    a.dom.create = function(g, e) {
      var h = document.createElement(g), f = e || {};
      return a.dom.setAttrs(h, f)
    };
    a.object = a.object || {};
    a.extend = a.object.extend = function(g, e) {
      for ( var f in e) {
        if (e.hasOwnProperty(f)) {
          g[f] = e[f]
        }
      }
      return g
    }
  })();
  var c = BMapLib.LuShu = function(g, f, e) {
    if (!f || f.length < 1) {
      return
    }
    this._map = g;
    this._path = f;
    this.i = 0;
    this._setTimeoutQuene = [];
    this._projection = this._map.getMapType().getProjection();
    this._opts = {
      icon : null,
      speed : 4000,
      defaultContent : ""
    };
    this._setOptions(e);
    this._rotation = 0;
    if (!this._opts.icon instanceof BMap.Icon) {
      this._opts.icon = defaultIcon
    }
  };
  c.prototype._setOptions = function(e) {
    if (!e) {
      return
    }
    for ( var f in e) {
      if (e.hasOwnProperty(f)) {
        this._opts[f] = e[f]
      }
    }
  };
  c.prototype.start = function() {
    var f = this, e = f._path.length;
    if (f.i && f.i < e - 1) {
      if (!f._fromPause) {
        return
      } else {
        if (!f._fromStop) {
          f._moveNext(++f.i)
        }
      }
    } else {
      f._addMarker();
      f._timeoutFlag = setTimeout(function() {
        f._addInfoWin();
        if (f._opts.defaultContent == "") {
          f.hideInfoWindow()
        }
        f._moveNext(f.i)
      }, 400)
    }
    this._fromPause = false;
    this._fromStop = false
  }, c.prototype.stop = function() {
    this.i = 0;
    this._fromStop = true;
    clearInterval(this._intervalFlag);
    this._clearTimeout();
    for (var g = 0, f = this._opts.landmarkPois, e = f.length; g < e; g++) {
      f[g].bShow = false
    }
  };
  c.prototype.pause = function() {
    clearInterval(this._intervalFlag);
    this._fromPause = true;
    this._clearTimeout()
  };
  c.prototype.hideInfoWindow = function() {
    this._overlay._div.style.visibility = "hidden"
  };
  c.prototype.showInfoWindow = function() {
    this._overlay._div.style.visibility = "visible"
  };
  a.object
      .extend(
          c.prototype,
          {
            _addMarker : function(f) {
              if (this._marker) {
                this.stop();
                this._map.removeOverlay(this._marker);
                clearTimeout(this._timeoutFlag)
              }
              this._overlay
                  && this._map.removeOverlay(this._overlay);
              var e = new BMap.Marker(this._path[0]);
              this._opts.icon && e.setIcon(this._opts.icon);
              this._map.addOverlay(e);
              e.setAnimation(BMAP_ANIMATION_DROP);
              this._marker = e
            },
            _addInfoWin : function() {
              var f = this;
              var e = new d(f._marker.getPosition(),
                  f._opts.defaultContent);
              e.setRelatedClass(this);
              this._overlay = e;
              this._map.addOverlay(e)
            },
            _getMercator : function(e) {
              return this._map.getMapType().getProjection()
                  .lngLatToPoint(e)
            },
            _getDistance : function(f, e) {
              return Math.sqrt(Math.pow(f.x - e.x, 2)
                  + Math.pow(f.y - e.y, 2))
            },
            _move : function(n, j, m) {
              var i = this, h = 0, e = 10, f = this._opts.speed
                  / (1000 / e), l = this._projection
                  .lngLatToPoint(n), k = this._projection
                  .lngLatToPoint(j), g = Math.round(i
                  ._getDistance(l, k)
                  / f);
              if (g < 1) {
                i._moveNext(++i.i);
                return
              }
              i._intervalFlag = setInterval(
                  function() {
                    if (h >= g) {
                      clearInterval(i._intervalFlag);
                      if (i.i > i._path.length) {
                        return
                      }
                      i._moveNext(++i.i)
                    } else {
                      h++;
                      var o = m(l.x, k.x, h, g), r = m(
                          l.y, k.y, h, g), q = i._projection
                          .pointToLngLat(new BMap.Pixel(
                              o, r));
                      if (h == 1) {
                        var p = null;
                        if (i.i - 1 >= 0) {
                          p = i._path[i.i - 1]
                        }
                        if (i._opts.enableRotation == true) {
                          i.setRotation(p, n, j)
                        }
                        if (i._opts.autoView) {
                          if (!i._map.getBounds()
                              .containsPoint(q)) {
                            i._map.setCenter(q)
                          }
                        }
                      }
                      i._marker.setPosition(q);
                      i._setInfoWin(q)
                    }
                  }, e)
            },
            setRotation : function(l, f, m) {
              var j = this;
              var e = 0;
              f = j._map.pointToPixel(f);
              m = j._map.pointToPixel(m);
              if (m.x != f.x) {
                var k = (m.y - f.y) / (m.x - f.x), g = Math
                    .atan(k);
                e = g * 360 / (2 * Math.PI);
                if (m.x < f.x) {
                  e = -e + 90 + 90
                } else {
                  e = -e
                }
                j._marker.setRotation(-e)
              } else {
                var h = m.y - f.y;
                var i = 0;
                if (h > 0) {
                  i = -1
                } else {
                  i = 1
                }
                j._marker.setRotation(-i * 90)
              }
              return
            },
            linePixellength : function(f, e) {
              return Math.sqrt(Math.abs(f.x - e.x)
                  * Math.abs(f.x - e.x) + Math.abs(f.y - e.y)
                  * Math.abs(f.y - e.y))
            },
            pointToPoint : function(f, e) {
              return Math.abs(f.x - e.x) * Math.abs(f.x - e.x)
                  + Math.abs(f.y - e.y) * Math.abs(f.y - e.y)
            },
            _moveNext : function(e) {
              var f = this;
              if (e < this._path.length - 1) {
                f._move(f._path[e], f._path[e + 1],
                    f._tween.linear)
              }
            },
            _setInfoWin : function(g) {
              var f = this;
              if (!f._overlay) {
                return
              }
              f._overlay.setPosition(g, f._marker.getIcon().size);
              var e = f._troughPointIndex(g);
              if (e != -1) {
                clearInterval(f._intervalFlag);
                f._overlay
                    .setHtml(f._opts.landmarkPois[e].html);
                f._overlay.setPosition(g,
                    f._marker.getIcon().size);
                f._pauseForView(e)
              } else {
                f._overlay.setHtml(f._opts.defaultContent)
              }
            },
            _pauseForView : function(e) {
              var g = this;
              var f = setTimeout(function() {
                g._moveNext(++g.i)
              }, g._opts.landmarkPois[e].pauseTime * 1000);
              g._setTimeoutQuene.push(f)
            },
            _clearTimeout : function() {
              for ( var e in this._setTimeoutQuene) {
                clearTimeout(this._setTimeoutQuene[e])
              }
              this._setTimeoutQuene.length = 0
            },
            _tween : {
              linear : function(f, j, h, i) {
                var e = f, l = j - f, g = h, k = i;
                return l * g / k + e
              }
            },
            _troughPointIndex : function(f) {
              var h = this._opts.landmarkPois, j;
              for (var g = 0, e = h.length; g < e; g++) {
                if (!h[g].bShow) {
                  j = this._map.getDistance(new BMap.Point(
                      h[g].lng, h[g].lat), f);
                  if (j < 10) {
                    h[g].bShow = true;
                    return g
                  }
                }
              }
              return -1
            }
          });
  function d(e, f) {
    this._point = e;
    this._html = f
  }
  d.prototype = new BMap.Overlay();
  d.prototype.initialize = function(e) {
    var f = this._div = a.dom
        .create(
            "div",
            {
              style : "border:solid 1px #ccc;width:auto;min-width:50px;text-align:center;position:absolute;background:#fff;color:#000;font-size:12px;border-radius: 10px;padding:5px;white-space: nowrap;"
            });
    f.innerHTML = this._html;
    e.getPanes().floatPane.appendChild(f);
    this._map = e;
    return f
  };
  d.prototype.draw = function() {
    this.setPosition(this.lushuMain._marker.getPosition(),
        this.lushuMain._marker.getIcon().size)
  };
  a.object.extend(d.prototype, {
    setPosition : function(h, i) {
      var f = this._map.pointToOverlayPixel(h), e = a.dom.getStyle(
          this._div, "width"), g = a.dom
          .getStyle(this._div, "height");
      overlayW = parseInt(this._div.clientWidth || e, 10),
          overlayH = parseInt(this._div.clientHeight || g, 10);
      this._div.style.left = f.x - overlayW / 2 + "px";
      this._div.style.bottom = -(f.y - i.height) + "px"
    },
    setHtml : function(e) {
      this._div.innerHTML = e
    },
    setRelatedClass : function(e) {
      this.lushuMain = e
    }
  })
})();
function showallrecord(starttime,endtime){//显示多条开始结束时间之间的自行车路书
  var bikeId=null;
  $.getJSON("./GetBickIdServlet",function(json){
    bikeId = json;//所有自行车编号
  });
  var json={
      "StartTime":starttime,//开始时间
      "EndTime":endtime//结束时间
  };
  //创建二维数组,例如pointArray[i]中i自行车编号,pointArray[i][j]为编号为i的自行车的所有借还站点信息
  $.getJSON("./GetAllRecordServlet",{json:JSON.stringify(json)},function(json){
    var j = 0;
    var stationlonlist=new Array();
    var stationlatlist=new Array();
    var pointArray=new Array();
    var bikeIdlist = new Array();
    for(var i = 0; i < bikeId.length; i++){
      stationlonlist[i] = new Array();
      stationlatlist[i] = new Array();
      pointArray[i] = new Array();
      bikeIdlist[i] = bikeId[i].BikeId;
    }
    var tt = json.length < 200?json.length:200;//如果查询出来的自行车借还站点记录多于200条,则显示200条。(待完善)
    for (var row = 0; row < pointArray.length; row++) {
      while (j < tt) {
        var k = j;
        var p = 0;
        var stationlon = parseFloat(json[j].Stationlon);// String类型转换成float类型
        stationlonlist[row][p]=stationlon;// 将stationlon放到stationlonlist里
        var stationlat = parseFloat(json[j].Stationlat);
        stationlatlist[row][p]=stationlat;// 将stationlat放到stationlatlist里
        pointArray[row][p] = new BMap.Point(stationlon,stationlat);
        while (bikeIdlist[row] == json[k + 1].BikeId) {
          k++;
          p++;
          stationlon= parseFloat(json[k].Stationlon);// String类型转换成float类型
          stationlonlist[row][p]=stationlon;// 将stationlon放到stationlonlist里
          stationlat= parseFloat(json[k].Stationlat);
          stationlatlist[row][p] =stationlat;// 将stationlat放到stationlatlist里
          pointArray[row][p] = new BMap.Point(stationlon, stationlat);
        }
        addMarkertest(pointArray,row);//添加标记点
        j = k + 1;
        break;
      }
      var bikespeedtest = speedtest(pointArray,row);//每辆自行车路书的速度
      polylinetest(pointArray,row,stationlonlist,stationlatlist);//每辆自行车借还站点间画折线
      lushutest(pointArray,bikespeedtest,row,stationlonlist,stationlatlist);//每辆自行车借还站点的路书路径
    }
    map.setViewport(pointArray);
  });
}
function speedtest(pointArray,row){//根据自行车的借还时间差来显示不同的路书速度(待完善)
  var distance = 0;//直行车走过的路径长度
  for(var i = 0; i < pointArray[row].length-1; i++){
    distance += (map.getDistance(pointArray[row][i],pointArray[row][i+1]));//自行车借还站点的路径长度
  }
  return distance/20;//速度=路径长度/时间(此处时间固定,可改为根据数据库读取的时间)
}

//
function polylinetest(pointArray,row,stationlonlist,stationlatlist){
  var points = new Array();
  for(var i = 0; i < pointArray[row].length; i++){
    points[i] = new BMap.Point(parseFloat(stationlonlist[row][i]), parseFloat(stationlatlist[row][i]));
  }
  //增加点与点之间的连线
  var polyline = new BMap.Polyline(points, {
    strokeColor : getColor(),
    strokeWeight : 2,
    strokeOpacity : 0.5
  }); // 创建折线
  map.addOverlay(polyline); // 绘制折线
}

//
function lushutest(pointArray,bikespeedtest,row,stationlonlist,stationlatlist){
  var points = new Array();
  for(var i = 0; i < pointArray[row].length; i++){
    points[i] = new BMap.Point(parseFloat(stationlonlist[row][i]), parseFloat(stationlatlist[row][i]));
  }
  var lushu = new BMapLib.LuShu(map, points, {
    defaultContent : "",
    autoView : true, // 是否开启自动视野调整,如果开启那么路书在运动过程中会根据视野自动调整
    icon : new BMap.Icon('photo/bike.png', new BMap.Size(22, 22), {
      anchor : new BMap.Size(10, 25)
    }),
    // enableRotation: true, //是否设置marker随着道路的走向进行旋转
    speed : bikespeedtest,
  });
  lushu.start();
}

//生成折线的随机颜色
function sj16(){
  var sjshu=Math.round(Math.random()*10*2);
  do
  {
    sjshu=Math.round(Math.random()*10*2);
  }while (sjshu>=14);
  return sjshu;
}
function getColor(){
  var hex = ['1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
  var yanse="";
  for(i=0; i<6; i++){
    yanse+=hex[sj16()];
  }
  return "#"+yanse
}

效果图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序 地图定位简单实例

    微信小程序开发地图定位. 微信小程序 刚刚公布没多久,自己学习一下内容,以便以后的开发,想落后别人,这里做了一个简单的小程序示例,大家可以参考下 要求要完成的功能: 1.要完成的要点是城市定位. 2.就是切换城市. 首页我们先参照微信小程序开放的官方文档找到: 在这里我们可以找到"当前位置经纬度" getLocation: function () { var that = this wx.getLocation( { success: function (res) { console.

  • 微信小程序教程之本地图片上传(leancloud)实例详解

    微信小程序 leancloud --本地图片上传 由于本站最近学习微信小程序的知识,这里记录下微信小程序实现本地上传的功能实现方法,以下是网上找的资料,大家看下. 将本地图片上传至leancloud后台. 获取本地图片或者拍照,我在上一篇博文中写过.这里就不说了.我的博客 直接上代码: 1.index.js //index.js //获取应用实例 var app = getApp() const AV = require('../../utils/av-weapp.js'); Page({ da

  • 微信小程序 wxapp地图 map详解

    微信小程序 wxapp地图 map: map 属性名 类型 默认值 说明 longitude Number   中心经度 latitude Number   中心纬度 scale Number 1 缩放级别 markers Array   标记点 covers Array   覆盖物 标记点 标记点用于在地图上显示标记的位置,不能自定义图标和样式 属性 说明 类型 必填 备注 latitude 纬度 Number 是 浮点数,范围 -90 ~ 90 longitude 经度 Number 是 浮

  • JS代码实现百度地图 画圆 删除标注

    把下面这段代码复制到百度地图的demo中运行,效果就是我想设计的效果. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-sc

  • 微信小程序 地图(map)实例详解

    微信小程序 地图(map)实例 这里是小编对微信小程序 地图(map API )做的资料整理,获取当前的地址,应该如何实现的实例,大家可以看下. 今天做到地图定位的模块.模拟器肯定是获取不到位置的.下面为真机测试结果. 上图: 经纬度不说了.定位用的,我这里直接输入的数字定位.但是有许多问题 下图中scale是缩放比例,这个属性目前无效.后期微信团队应该会修复.毕竟现在刚开始公测.这样就导致我不管怎么修改scale,我的地图都是在默认的缩放比例.如上图. markers中的rotate是图标的旋

  • 在网页中插入百度地图的步骤详解

    第一步:进入百度创建地图的网站http://api.map.baidu.com/lbsapi/creatmap/,搜索出自己要展示的位置,如下图所示. 第二步:设置地图,大家可以对网站显示地图的宽高进行设置,其余选项不动. 第三步:添加标注.点击第一个图标后,在右侧找到自己的位置,单击鼠标左键可定位.标记图标处可更换图标形状,名称和备注填入位置相关信息. 第四步:获取代码.将代码贴到你的网页里 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra

  • jsp使用ECharts动态在地图上标识点

    ECharts可以很方便的在网页上绘制地图,图表,并且可以提供下载图像,放大,缩小,拖动等功能,今天主要说一下它的地图类型(type:'map')是如何实现的. 首先在ECharts地图的坐标需要我们存储在一个geoCoord属性里,它是一个JS的字典对象,由键/值对组成,键表示点的名称,值则表达它的坐标,由经纬度组成,它是一个数组,如[136.00,32.00]它就表示了一个坐标. 地图类型的图表需要关注的元素 title:标题,显示这个地图所表示的名称 title: { text: '清大云

  • AngularJS 与百度地图的结合实例

    我现在做的一个项目是angular,但是我用直接引用百度地图的方法引进js,写html,js代码,发现,我去,报错了,我一开始还以为是百度地图跟angular有冲突,然后我就去搜索啊,发现angular也有一个百度地图插件,无奈我用了报错了,网上说要用angular2版本才能兼容,但是我又不会下载2版本,所以我就放弃了,然后呢,我又去解决我一开始的那个错误了,发现,玛德我傻逼了,首先来说一下百度地图怎么用吧,很简单,上代码 首先引入js <script type="text/javascr

  • js实现百度地图同时显示多个路书效果

    本文介绍了js实现百度地图同时显示多个路书效果,主要是以自行车的还车地点作为实例,具体代码如下: 启动路书: <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=自己的ak"></script> <script type="text/javascript" src="js/lushu.js"&g

  • JS使用百度地图API自动获取地址和经纬度操作示例

    本文实例讲述了JS使用百度地图API自动获取地址和经纬度操作.分享给大家供大家参考,具体如下: 在实际工作中我们经常会遇到这样的问题,但是当我们去看百度API的时候往往又达不到我们的要求. 故此,本篇博文讲述如何使用百度地图API自动获取地址和经纬度: 1.HTML代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht

  • php+js实现百度地图多点标注的方法

    本文实例讲述了php+js实现百度地图多点标注的方法.分享给大家供大家参考,具体如下: 1.php创建json数据 $products = $this->product_db->select($where); $products_json = json_encode($products); 2.js传入json数据 类似于这样的结构 var markerArr = [{ title: "名称:广州火车站", point: "113.264531,23.157003

  • js调用百度地图及调用百度地图的搜索功能

    js调用百度地图的方法 代码如下: <!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" /&

  • 详解js根据百度地图提供经纬度计算两点距离

    正常在使用百度地图时,我们可以通过BMap的实例对象提供的方法计算距离: var map = new BMap.Map('map_canvas'); map.getDistance(point1 ,point2); //point1.point2 是Point对象 如果在不使用百度地图,但是已知百度地图的经纬度情况下也是可以计算出与上面相同的值的 三方库 此库提供计算两点距离的方法 引用此库使用 返回(米) BMapLib.GeoUtils.getDistance(point1 ,point2)

  • js实现百度地图定位于地址逆解析,显示自己当前的地理位置

    话不多说,随小编一起看看实例代码吧 <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=&qu

  • js 调用百度地图api并在地图上进行打点添加标注

    最近要做一个网页,具体内容是:上边有一个标题,下边分成两块,左边是地图.并且地图上有两个点,点击两个点有相应的提示信息,显示数据库里最新的两条数据信息.右边是一些文字说明.本人刚开始学习,做的也不是很好 总体效果如下所示: 首先新建map.php文件,代码如下 复制代码 代码如下: <!DOCTYPE html> <?php /* 创建与数据库的连接 */ $conn=mysql_connect("","","") or die

  • 微信JS-SDK坐标位置如何转换为百度地图坐标

    微信JS-SDK开发过程中,使用getLocation获取坐标位置,如何将微信获取的坐标直接应用到百度地图中,显示以下效果: 说明:红色图标是从微信转换过来的位置,蓝色图标是周边位置.首先从微信开发流程讲解. 1.微信JS-SDK开发文档 首先进入官网的帮助文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115&token=&lang=zh_CN 可对文档进行详细的研读,要获取位置信息,分以下步骤:

  • Vue百度地图实现定位和marker拖拽监听功能

    目录 一.完成地图步骤 1.在index.html引入百度地图 2.创建地图容器,容器一定要设置宽高 3.创建地图实例 二.百度地图踩过的一些坑 1.'BMap' is not defined报错 2.标注没有出现在地图中间而是左上角 3.定位不准确 效果图:拖拽前和拖拽后 一.完成地图步骤 百度地图文档地址:地图 JS API | 百度地图API SDK 1.在index.html引入百度地图 <script type="text/javascript" src="h

  • JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码

    本文实例讲述了JS实现模拟百度搜索"2012世界末日"网页地震撕裂效果代码.分享给大家供大家参考,具体如下: 这是一款JS模拟百度搜索"2012世界末日"网页地震撕裂效果,本效果是模仿用户在百度输入"2012世界末日"后点击搜索后出来的网页效果,网页在震动,像是地震了,而后开始撕裂,然后显示出相关的文字说明,很酷的效果,希望大家可以学习借鉴. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-

随机推荐