【分享】百度地图api初使用,行政区划及搜索?

    互联网/前端 85次点击 · 1227天前 · 娜比啊
Redis的6种数据类型如何在PPT中插入表格? 娜比啊

1条回答我要回复

    陈师傅1227天前

      最近发现了百度地图api这个好东西,官网上细致的demo和讲解,所以写了以下html
      里面包含这几个功能:地图调用,行政区边界,还有一个地图搜索的搜索框




      <!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,#allmap {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
      #r-result{width:100%;position:absolute;}
      <!--去除logo-->
      .BMap_cpyCtrl {
      display:none;
      }
      .anchorBL{
      display:none;
      }
      </style>
      <script type="text/Javascript" src="
      <title>百度地图API功能</title>
      </head>
      <body>
      <div id="container">
      <div id="header" >
      <h1 align="center">地图展示</h1></div>

      <div id="menu" >
      <b text-align="center">--搜索功能--</b><br>
      <div id="r-result">请输入:<input type="text" id="suggestId" size="20" value="百度" ></div>
      <div id="searchResultPanel" ></div></div>
      <div id="allmap" ></div><!--用于放置地图-->

      <div id="footer" >api</div>
      </div>
      </body>
      </html>
      <script type="text/Javascript">

      // 百度地图API功能
      function G(id) { //搜索框
      return document.getElementById(id);
      }

      var map = new BMap.Map("allmap"); // 创建Map实例
      map.centerAndZoom("天津", 11); // 初始化地图,设置中心点坐标和地图级别

      //添加地图类型控件
      map.addControl(new BMap.MapTypeControl({
      mapTypes:[
      BMAP_NORMAL_MAP,
      BMAP_HYBRID_MAP
      ]}));
      map.setCurrentCity("天津"); // 设置地图显示的城市 此项是必须设置的
      map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

      //搜索功能
      var ac = new BMap.Autocomplete( //建立一个自动完成的对象
      {"input" : "suggestId"
      ,"location" : map
      });

      ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件
      var str = "";
      var _value = e.fromitem.value;
      var value = "";
      if (e.fromitem.index > -1) {
      value = _value.province + _value.city + _value.district + _value.street + _value.business;
      }
      str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

      value = "";
      if (e.toitem.index > -1) {
      _value = e.toitem.value;
      value = _value.province + _value.city + _value.district + _value.street + _value.business;
      }
      str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
      G("searchResultPanel").innerHTML = str;
      });

      var myValue;
      ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
      var _value = e.item.value;
      myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
      G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

      setPlace();
      });
      function setPlace(){
      map.clearOverlays(); //清除地图上所有覆盖物
      function myFun(){
      var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
      map.centerAndZoom(pp, 12);
      map.addOverlay(new BMap.Marker(pp)); //添加标注
      }
      var local = new BMap.LocalSearch(map, { //智能搜索
      onSearchComplete: myFun
      });
      local.search(myValue);
      }
      //津南区轮廓
      function getBoundary(){
      var bdary = new BMap.Boundary();
      bdary.get("天津市津南区", function(rs){ //获取行政区域
      map.clearOverlays(); //清除地图覆盖物
      var count = rs.boundaries.length; //行政区域的点有多少个
      if (count === 0) {
      alert('未能获取当前输入行政区域');
      return ;
      }
      var pointArray = [];
      for (var i = 0; i < count; i++) {
      var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 4, strokeColor: "black",fillColor:"none"}); //建立多边形覆盖物
      map.addOverlay(ply); //添加覆盖物
      pointArray = pointArray.concat(ply.getPath());
      }
      map.setViewport(pointArray); //调整视野
      addlabel();
      });
      }
      setTimeout(function(){
      getBoundary();
      }, 2000);
      </script>百度地图api上还有很多有用的功能,例如地铁线路,公交线路,还有LBS云,可以存储数据以及方便地调用。

    请先登录后,再回复