vue百度地图api 获取小区边界值

<div id="getMap" ></div>  <!--地图容器  -->
 this.$nextTick(function() {
   //  初始化百度地图
		var getmap = new BMap.Map("getMap", {
            enableMapClick: false // 禁止底图点击事件
          });
            // 创建地图实例
          var point = new BMap.Point(118.629051, 32.059719);
          // 创建点坐标
         var getmap.centerAndZoom(point, 20);
          var getmap.enableScrollWheelZoom(true);//启用滚轮放大缩小,默认禁用
           //通过百度提供的JS接口LocalSearch的Search方法搜索小区名称
            var local = new BMap.LocalSearch(getmap, {
          				  renderOptions: { map: getmap }
         		 });
       local.setMarkersSetCallback(function(pois){
              //清除所有覆盖物后,在叠加第一个点
              getmap .clearOverlays();
              for(var i=0;i<pois.length;i++){
                  var marker = new BMap.Marker(pois[i].point);
                  getmap .addOverlay(marker);
              }
              //根据获取到的poi id,查询边界坐标集合,画多边形
              var uid = pois[0].uid;
               $.ajax({
            async: false,
            url:"https://map.baidu.com/?pcevaname=pc4.1&qt=ext&ext_ver=new&l=12&uid="+uid,
            dataType:'jsonp',
            jsonp:'callback',
            success:function(re){
            	this.queryUid(re.content)
            	}
         	 })
          })    
           //名称获取uid
          local.search("北京");
          
           function queryUid(content) {
            if (null != content.geo && content.geo != undefined) {
              var geo = content.geo;
              var pointss = coordinateToPoints(geo);
              //pointss分组,得到多边形的每一个点,画多边形
              if (pointss && pointss.indexOf(";") >= 0) {
                pointss = pointss.split(";");
              }
              var arr = [];
              for (var i = 0; i < pointss.length - 1; i++) {
                var temp = pointss[i].split(",");
                arr.push(
                  new BMap.Point(parseFloat(temp[0]), parseFloat(temp[1]))
                );
              }
              //制作线
              var polygon = new BMap.Polygon(arr, {
                strokeColor: "blue", //线 的颜色
                strokeWeight: 2, //线的大小
                fillColor: "null", //填充色
                strokeStyle: "dashed", //虚线-实线
                strokeOpacity: 0.5,
                fillOpacity: 0.01
              }); //创建多边形
              getmap.addOverlay(polygon); //增加多边形
            }
          }
           //制作百度米坐标
          function coordinateToPoints(coordinate) {
            var pointss = "";
            if (coordinate) {
              var projection = BMAP_NORMAL_MAP.getProjection();

              if (coordinate && coordinate.indexOf("-") >= 0) {
                coordinate = coordinate.split("-");
              }
              //取点集合
              var tempco = coordinate[1];
              if (tempco && tempco.indexOf(",") >= 0) {
                tempco = tempco.replace(";", "").split(",");
              }
              //分割点,两个一组,组成百度米制坐标
              var temppoints = [];
              for (var i = 0, len = tempco.length; i < len; i++) {
                var obj = new Object();
                obj.lng = tempco[i];
                obj.lat = tempco[i + 1];
                temppoints.push(obj);
                i++;
              }
              //遍历米制坐标,转换为经纬度
              for (var i = 0, len = temppoints.length; i < len; i++) {
                //var pos = coordinate[i].split(',');
                var pos = temppoints[i];
                var point = projection.pointToLngLat(
                  new BMap.Pixel(pos.lng, pos.lat)
                );
                pointss += [point.lng, point.lat].toString() + ";";
              }
            }
            return pointss;
          }
})
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值