2021-03-15 11:04:36 版本 : 百度地图相关知识点
作者: 郁冲冲 于 2021年03月15日 发布在分类 / 人防组 / 人防前端 下,并于 2021年03月15日 编辑
 历史版本

修改日期 修改人 备注
2021-03-15 11:05:08[当前版本] 郁冲冲 其他原因...
2021-03-15 11:04:36 郁冲冲 创建版本

地图中只显示局部区域

实际需求:以某个城市为中心点展示该城市的地图,多余部分不展示,以免用户点击

粘贴图片


初始化地图

initData() {
      let that = this;
      that.map = new BMap.Map("container", { enableMapClick: false });
      that.map.centerAndZoom("长沙市", 13);
      that.map.enableScrollWheelZoom(true);
      // 控制地图显示范围
      that.draw();
      // 标点
      that.markIcon();
      //   var geocoder = new BMap.Geocoder();
      //   that.map.addEventListener("click", function (e) {
      //     geocoder.getLocation(e.point, function (rs) {
      //       console.log(rs);
      //     });
      //   });
    },

控制地图显示范围

draw() {
      let that = this;
      // 画出图边界
      var bdary = new BMap.Boundary();
      bdary.get("长沙市", function (rs) {
        //获取行政区域
        // map.clearOverlays(); //清除地图覆盖物
        var EN_JW = "180, 90;"; //东北角
        var NW_JW = "-180,  90;"; //西北角
        var WS_JW = "-180, -90;"; //西南角
        var SE_JW = "180, -90;"; //东南角
        // 添加环形遮罩层
        var ply1 = new BMap.Polygon(
          rs.boundaries[0] + SE_JW + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW,
          {
            strokeColor: "none",
            fillColor: "rgb(246,246,246)",
            fillOpacity: 1,
            strokeOpacity: 0.5,
          }
        ); //建立多边形覆盖物
        that.map.addOverlay(ply1);
        //给目标行政区划添加边框,其实就是给目标行政区划添加一个没有填充物的遮罩层
        var ply = new BMap.Polygon(rs.boundaries[0], {
          strokeWeight: 2,
          strokeColor: "#00f",
          fillColor: "",
        });
        that.map.addOverlay(ply);
      });
    },

地图显示点用自定义本地图片,记得用require()引入

markIcon() {
      let that = this;
      var myIcon = new BMap.Icon(
        require("../../assets/images/jianguan.png"),
        new BMap.Size(25, 27)
      );
      var marker1 = new BMap.Marker(new BMap.Point(112.967317, 28.244691),{icon:myIcon});
      that.map.addOverlay(marker1);
    },


 附件

附件类型

PNGPNG

历史版本-目录  [回到顶端]
    知识分享平台 -V 4.8.7 -wcp