WEB端百度地图综合应用(angular1.4)

  ·   百度地图   ·   angular   ·   JavaScript     浏览量:

前言

  1. 代码背景是angular1.4
  2. 百度地图需要自行申请密钥
  3. 百度地图接口地址

功能&接口

var map = new BMap.Map("#ele_id");
  1. 地图样式,(点我自定义)
map.setMapStyle({styleJson: 自定义生成JSON});
  1. 自定义图标,标签样式样式,添加自定义属性
var myIconBlack = new BMap.Icon("/public/images/dingwei_black.png", new BMap.Size(30,30)); // 图标路径, 大小
var label = new BMap.Label('✔ ' + pointList[i].premisesName); //pointList[i].premisesName是自定义的名字
var labelStyleChecked = {
        padding: '2px 3px',
        transform: 'translate(-25%, -100%)',
        background: '#fff',
        border: 'none',
        fontWeight: 'bold',
        boxShadow: '0 0px 1px rgba(0,0,0,.5)',
        color: '#b81c22'
      }; // 标签样式
label.setStyle(labelStyleChecked);
var marker = new BMap.Marker(point, {icon:myIconBlack});

marker.setLabel(label);
marker.customData = {'dataIndex': dataIndex}; // 自定义属性
map.addOverlay(marker);
  1. 鼠标缩放拖动
map.enableScrollWheelZoom();
map.enableContinuousZoom();
// 监听缩放
map.addEventListener("zoomend", function(){
    zoomNum = map.getZoom(); // 获取缩放级别
});
// 监听拖动
map.addEventListener("dragend", function(){
    // 获取新的中心位置
    var center = map.getCenter();
    mapParam.build.tags.longitude = center.lng;
    mapParam.build.tags.latitude  = center.lat;
})
  1. 点击图标切换选中状态,并切换图标
// 监听点击图标
  marker.addEventListener("click", attribute);
  function attribute() {
    var currentIcon = this.getIcon().imageUrl.split('/').pop();
    var currentLabel = this.getLabel().content;
    var thisIndex = this.customData.dataIndex;
    $scope.dataExchange.changeLocalChecked($scope.resData.mapPointList[thisIndex]);

    // 添加
    if(currentIcon === 'dingwei_black.png') {
      this.setIcon(myIconRed);
      this.getLabel().setContent('✔ ' + currentLabel);
      this.getLabel().setStyle(labelStyleChecked);

      $scope.mapCheckedList[currentLabel] = $scope.resData.mapPointList[thisIndex];
      $scope.$apply();
    } 
    // 删除
    else {
      this.setIcon(myIconBlack);
      this.getLabel().setContent(currentLabel.split(" ")[1])
      this.getLabel().setStyle(labelStyle);
      delete $scope.mapCheckedList[currentLabel.split(" ")[1]];
      $scope.$apply();
    }
  }
  1. 根据中心点圈选范围(圈内数据由接口提供)
  2. 切换选择圈选范围
  3. 拖动重新选择圈选中心(保持缩放范围),并获取新的数据

效果图如下

timjie-tu-20190430093942

代码如下



收起 >>
WEB端百度地图综合应用(angular1.4)