Vue2使用百度地图展示或搜索地点(vue-baidu-map)

①安装插件:yarn add vue-baidu-map

②在main.js中全局注册引入:

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  ak: 'your_app_key' // 百度地图秘钥
})

④使用一:在地图上展示标注地点

查询并获取某个地点的坐标工具拾取坐标系统

<div class="m-map-container">
    <div class="m-map">
        <baidu-map
            class="bmView"
            :scroll-wheel-zoom="false" // 禁止鼠标滚轮缩放
			:dragging="false" // 禁止拖拽
			:double-click-zoom="false" // 禁止鼠标双击缩放
            :map-click="false" // 禁用鼠标点击查看详情
            :center="location"
            :zoom="zoom">
            <bm-marker :position="location" animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
            <bm-view style="width: 100%; height: 480px; flex: 1;border-radius: 5px;"></bm-view>
        </baidu-map>
    </div>
</div>
data () {
    return {
        location: {
            lng: 102.68906,
            lat: 25.049784
        }, // 指定地点的经纬度
        zoom: 20 // 地图缩放比例
    }
}
.m-map-container {
  width: 1200px;
  text-align: center;
  margin: 0 auto;
  background: #fff;
  .m-map {
    margin: 0 auto;
    width: 800px;
    padding-top: 60px;
  }
}
// 移除左下角百度地图版权
/deep/ div.BMap_cpyCtrl.BMap_noprint.anchorBL {
  display: none;
}
// 移除左下角百度地图logo
/deep/ div.anchorBL {
  display: none;
}
// 悬浮地图时不展示小手
/deep/ .BMap_mask {
  cursor: default;
}

⑤使用二:在地图上搜索地点,并可通过鼠标点击获取其经纬度及详细地址信息

<template>
  <a-modal
    title="地址坐标"
    :width="980"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    :footer="null"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row :gutter="16">
          <a-col :lg="12" :md="12">
            <a-form-item>
              <a-input-search
                placeholder="请输入地址"
                enter-button="查询"
                @search="handleSearch"
                v-decorator="['address',{initialValue: defaultAddress}]"
              />
            </a-form-item>
          </a-col>
          <a-col :lg="12" :md="12">
            <a-form-item label="坐标" :labelCol="labelCol" :wrapper-col="wrapperCol">
              <a-input
                v-decorator="['address_coordinates']"/>
            </a-form-item>
          </a-col>
        </a-row>
        <div class="map">
          <!-- 地图点击事件getLocationPoint,获取地点详细信息、经纬度 -->
          <!-- scroll-wheel-zoom:是否可以用鼠标滚轮控制地图缩放,zoom:视图比例 -->
          <!-- dragging:是否可以用鼠标进行拖拽 -->
          <!-- double-click-zoom:是否可以用鼠标双击控制地图缩放 -->
          <!-- map-click:是否可以用鼠标点击查看详情 -->
          <baidu-map
            class="bmView"
            :scroll-wheel-zoom="true"
            :zoom="zoom"
            @click="getLocationPoint"
          >
            <!-- 右上角比例尺控件 -->
            <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
            <!-- 右上角缩放控件 -->
            <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
            <!-- 左上角地图类型控件 -->
            <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
            <!-- 右下角缩略图 -->
            <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map>
            <!-- 右下角加入定位控件 -->
            <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
            <!-- 左上角加入城市列表 -->
            <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
            <!-- 右上角加入全景控件 -->
            <!-- <bm-panorama anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-panorama> -->
            <bm-view class="u-bm-view"></bm-view>
            <bm-local-search :keyword="addressKeyword" :auto-viewport="true" class="u-search"></bm-local-search>
          </baidu-map>
        </div>
        <span class="m-span">
          <a-form-item style="margin-top: 20px;margin-bottom: 10px;">
            <a-button class="u-submit" type="primary" htmlType="submit" @click="handleSubmit">确定</a-button>
            <a-button class="u-cancal" @click="handleCancel">取消</a-button>
          </a-form-item>
        </span>
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
export default {
  data () {
    return {
      labelCol: {
        lg: { span: 4 },
        md: { span: 4 }
      },
      wrapperCol: {
        lg: { span: 20 },
        md: { span: 20 }
      },
      form: this.$form.createForm(this),
      addParams: {
        mod: 'add'
      },
      defaultAddress: '',
      visible: false,
      confirmLoading: false,
      zoom: 12,
      addressKeyword: ''
    }
  },
  methods: {
    getLocationPoint (e) {
      console.log('e:', e)
      console.log(e.point.lng + ',' + e.point.lat)
      /*
	    可以通过在.eslintrc.js中加入:
	    globals: {
	        BMap: true
	    }, // 防止eslint报错:'BMap' is not defined.
	    或者直接使用:// eslint-disable-next-line no-undef
      */
      const geoCoder = new BMap.Geocoder() // 创建地址解析器的实例
      /* 利用坐标获取地址的详细信息 */
      geoCoder.getLocation(e.point, res => {
        console.log('res:', res)
        this.form.setFieldsValue({
          // 地址和经纬度
          address: res.address,
          address_coordinates: res.point.lng + ',' + res.point.lat
        })
      })
    },
    handleSearch (value) {
      console.log(value)
      this.addressKeyword = value
    },
    check (value) {
      if (!this.defaultAddress) {
        this.defaultAddress = value
      } else {
        this.form.setFieldsValue({
          address: value
        })
      }
      this.addressKeyword = value
      this.visible = true
    },
    handleSubmit (e) {
      e.preventDefault()
      const { form: { validateFields } } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {
          this.visible = false
          this.confirmLoading = false
          console.log('values:', values)
          this.$emit('ok', values)
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel () {
      this.visible = false
    }
  }
}
</script>
<style lang="less" scoped>
// 移除左下角百度地图版权
/deep/ div.BMap_cpyCtrl.BMap_noprint.anchorBL{
  display: none;
}
// 移除左下角百度地图logo
/deep/ div.anchorBL{
  display: none;
}
.u-bm-view{
   width: 100%;
   height: 500px;
   flex: 1;
}
.m-span{
  text-align: center;
}
.u-submit{
  margin-right: 30px;
  width: 100px;
}
.u-cancal{
  margin-left: 30px;
  width: 100px;
}
/deep/ .BMap_CityListCtrl{
  margin-top: 30px;
  div div {
    .city_content_top{
      height: 36px;
      .cur_city_info{
        position: absolute;
        bottom: 0px;
        height: 24px;
      }
      #city_ctrl_form{
        .sel_city_input{
          height: 24px;
        }
      }
    }
  }
}
.u-search{
  display:none;
}
</style>
 

 

Vue3 中使用百度地图(BMap)并结合打点数据自动划分区域,通常需要以下几个步骤: 首先,你需要安装`@bmap/api`库,这是百度地图官方提供的JavaScript API,可以在项目中通过npm安装: ```bash npm install @bmap/api ``` 然后,在Vue组件中引入并初始化BMap实例: ```javascript import BMap from '@bmap/api'; export default { setup() { const map = ref(new BMap.Map('container', { zoom: 8, center: [116.404, 39.915], // 北京坐标作为初始中心 })); // 初始化地图API initMap(map.value); return { map }; }, mounted() { // 当组件挂载后加载地图 map.value.setCenterAndZoom([116.404, 39.915], 12); } } // 静态函数:初始化地图 function initMap(map) { // 其他地图配置... } ``` 接下来,你需要处理打点数据,例如从接口获取者本地存储。假设你已经有了一个包含经纬度的数组`points`: ```javascript const points = [ { lat: 39.915, lng: 116.404 }, // 示例打点 // 更多打点数据... ]; // 按照某种算法(如K-means聚类)对打点数据进行分组 function clusterPoints(points) { // 实现聚类算法... // 返回区域划分结果,每个区域是一个新的地标对象 return groupedRegions; } // 分区后更新地图,显示区域边界和标签 function updateMapWithClusters(groups) { groups.forEach((group, index) => { const polygonOptions = { paths: group.map(point => [point.lng, point.lat]), clickable: false, fillOpacity: 0.5, strokeWeight: 2, fillColor: 'rgba(0, 255, 0, 0.7)', // 绿色填充 }; const markerCluster = new BMap.MarkerCluster({ markers: group.map(point => new BMap.Marker({ position: [point.lng, point.lat] })), }); map.value.addOverlay(polygonOptions, `区域${index + 1}`); map.value.addOverlay(markerCluster); // 添加聚类标记 }); } // 在适当的时候,比如添加新点用户交互后 updateMapWithClusters(clusterPoints(points)); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值