首页 > 其他分享 >带有点选和搜索功能的百度地图

带有点选和搜索功能的百度地图

时间:2024-03-18 22:32:04浏览次数:20  
标签:map const point 地图 value BMapGL 搜索 new 百度

项目中用到了一个地图功能,可以点选和搜索,我选用了百度地图,实现效果如下,参考百度地图官方api修改以适应自己的项目就可以,仅供参考,有问题请留言;

1.首先在utils里面新建一个js文件baiduMap 
export const importBMapGL = () =>
  new Promise((resolve, reject) => {
    // ak:8tBaZbQSqrpMVQPAnekCvXgUnqt7WHFr

    const style = document.createElement('link')
    style.rel = 'stylesheet'
    style.href = 'http://api.map.baidu.com/res/webgl/10/bmap.css'
    document.body.appendChild(style)
    const sc = document.createElement('script')
    sc.type = 'text/javascript'
    sc.src =
      'http://api.map.baidu.com/getscript?type=webgl&v=1.0&ak=申请的ak'

    sc.onload = () => resolve(true)
    sc.onerror = () => reject(false)

    document.body.appendChild(sc)
  })
2.在页面中引用,使用方法如下
/**
 * 使用方法

import { importBMapGL } from '@/utils/baiduMap'

let map // map实例
function initMap() {
  map = new BMapGL.Map('allmap') // 创建Map实例
  var point = new BMapGL.Point(116.404, 39.915) // 创建点坐标
  map.centerAndZoom(point, 15) // 初始化地图,设置中心点坐标和地图级别
}

onMounted(() => {
  importBMapGL().then(initMap)
})

 */
           <el-row>
                <el-col :span="10">
              <el-form-item label="当前地点">
                <el-input
                  id="suggestId"
                  v-model="form.address"
                  clearable
                  placeholder="请输入要搜索的地区"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <div
            id="searchResultPanel"
            style="
              border: 1px solid #c0c0c0;
              width: 150px;
              height: auto;
              display: none;
            "
          ></div>
const initMap = () => {
  map.value = new BMapGL.Map(baiduRef.value) //新建一个map地图实例
  // debugger
  console.log(form.value)
  const point = ref(new BMapGL.Point(form.value.latitude, form.value.longitude)) // 创建标注点的经纬度
  const marker = ref(new BMapGL.Marker(point.value)) // 创建标注点
  // debugger
  // console.log(myValue.value)
  map.value.centerAndZoom(point.value, 15)
  map.value.enableScrollWheelZoom(true) //滚轮缩放
  map.value.addOverlay(marker.value) //在地图上显示标记点

  let zoomCtrl = new BMapGL.ZoomControl() // 添加缩放控件
  map.value.addControl(zoomCtrl)

  const geoc = new BMapGL.Geocoder()
  // 监听地图点击事件
  map.value.addEventListener('click', function (e) {
    //清除地图上所有的覆盖物
    map.value.clearOverlays()
    let pt = e.latlng
    let marker = new BMapGL.Marker(new BMapGL.Point(pt.lng, pt.lat))
    map.value.addOverlay(marker)
    geoc.getLocation(pt, function (rs) {
      let addComp = rs.addressComponents
      form.value.address =
        addComp.province +
        ', ' +
        addComp.city +
        ', ' +
        addComp.district +
        ', ' +
        addComp.street +
        ', ' +
        addComp.streetNumber
    })
  })
  // 创建自动完成对象
   ac = new BMapGL.Autocomplete({
    input: 'suggestId',
    location: map.value
  })

  ac.addEventListener('onhighlight', function (e) {
    //鼠标放在下拉列表上的事件
    let str = ''
    let _value = e.fromitem.value
    let 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
    document.getElementById('searchResultPanel').innerHTML = str
  })
  ac.addEventListener('onconfirm', function (e) {
    //鼠标点击下拉列表后的事件
    let _value = e.item.value
    form.value.address =
      _value.province +
      _value.city +
      _value.district +
      _value.street +
      _value.business
    document.getElementById('searchResultPanel').innerHTML =
      'onconfirm<br />index = ' +
      e.item.index +
      '<br />form.value.address = ' +
      form.value.address

    setPlace()
  })
}
// 根据搜索关键字定位地图并显示标记
const setPlace = () => {
  // map.value = new BMapGL.Map(baiduRef.value) //新建一个map地图实例
  map.value.clearOverlays() //清除地图上所有覆盖物
  if (!form.value.address) return
  const local = new BMapGL.LocalSearch(map.value, {
    renderOptions: { map: map.value },
    onSearchComplete: results => {
      if (results) {
        const firstResult = results.keyword
        getAddress(firstResult)
        // map.value.centerAndZoom(point, 18)
        // map.value.addOverlay(new BMapGL.Marker(point)) //添加标注
      }
    }
  })
  local.search(form.value.address)
}
const getAddress = address => {
  const geoc = new BMapGL.Geocoder()
  geoc.getPoint(address, point => {
    if (point) {
      form.value.latitude = point.lat
      form.value.longitude = point.lng
      map.value.centerAndZoom(point, 18)
      map.value.addOverlay(new BMapGL.Marker(point)) //添加标注
      console.log(address)
      form.value.address = address
    }
  })
}
onMounted(() => {
  importBMapGL().then(initMap)
})

我这个项目是写在弹框中的,编辑的时候需要回显地址内容,刚开始写的会有偶尔不显示的问题,如有遇到类似的问题,请在数据回显的地方单独设置下ac.setInputValue('内容')就解决了;

标签:map,const,point,地图,value,BMapGL,搜索,new,百度
From: https://blog.csdn.net/u011107860/article/details/136807602

相关文章

  • Win10系统还原后,单击Windows搜索图标没反应
    前言我的笔记本是Win10,操作系统内部版本是:19045.4170。背景前几天电脑中毒了,在桌面生成了一个mouselock.exe的一个流氓软件,会自动把笔记本锁住。原因可能是因为把Windows自带的杀毒软件关闭了,也有可能是被那个流氓软件给关闭的。我开启Windows自带的杀毒软件,就检测出那个软件是......
  • 2733: 【搜索】【广度优先】 马遍历棋盘
    题目描述有一个n*m的棋盘(1<n,m<=400),在某个点上有一个马,要求你计算出马到达棋盘上任意一个点最少要走几步输入一行四个数据,棋盘的大小和马的坐标输出一个n*m的矩阵,代表马到达某个点最少要走几步(左对齐,宽5格,不能到达则输出-1)样例输入4411样例输出0325......
  • 阿里巴巴中国站按关键字搜索工厂数据 API
    公共参数名称类型必须描述keyString是免费申请调用key(必须以GET方式拼接在URL中)secretString是调用密钥api_nameString是API接口名称(包括在请求地址中)[item_search,item_get,item_search_shop等]cacheString否[yes,no]默认yes,将调用缓存的数据,速度比较快result_typeString否[j......
  • 力扣---验证二叉搜索树---前根/中根/后根遍历
     题目解析参考:验证二叉搜索树_哔哩哔哩_bilibili一开始做呢,就跟这位老兄一样:因为没有考虑到5和3的比较接下来走入整体:先根遍历解法:首先 每个点其实都有范围,比如根节点的范围在(-INF,INF),就拿上面图片举例子,4这个节点的范围应该是(-INF,5),所以先序遍历,我们要先比较根......
  • 代码随想录算法训练营第23天|669. 修剪二叉搜索树|108.将有序数组转换为二叉搜索树|53
    代码随想录算法训练营第23天|669.修剪二叉搜索树|108.将有序数组转换为二叉搜索树|538.把二叉搜索树转换为累加树|总结篇669.修剪二叉搜索树这道题目比较难,比添加增加和删除节点难的多,建议先看视频理解。题目链接/文章讲解:https://programmercarl.com/0669.%E4%BF%A......
  • 自定义edge地址搜索栏
    在bing上搜索计算机相关内容,前两页csdn能占十之七八九,内容能参考的十之一二,毕竟还能看,这回csdn呱噪地把顶部广告栏直接加到页面的三有其一,翻看内容很不适,意思就是不登录就别看了,没辙,还是得屏蔽。因之前就屏蔽过一次,重装系统后没加上,这回照着旧路子再走一遍,edge点设置->隐私,搜索和......
  • Cocos实例1:实现平面游戏中的滚动地图
    Cocos实例:实现平面游戏中的滚动地图1.应用: 在2D游戏或某些UI界面中,会经常遇到一些循环滚动的背景或元素。例如飞机大战的背景、冒险岛的双层循环滚动背景,模拟视觉效果上角色在无限背景地图中运动。2.实现原理 需要一张上下或左右在顺序排列时可以无缝衔接的背景图片,搭......
  • CheatEngine百度网盘加速
    1.下载安装CheatEngine通过CE官网或者CEGitHub均可以下载2.CheatEngine汉化2.1.下载中文包进入CE官网,点击右侧导航Downloads,下拉找到Translations,下载中文包2.进入CE安装目录右键点击CE图标,选择属性,找到“起始位置”进入CE安装目录后,进入languages文件夹,将解压后的zh_CN......
  • python做了一个极简的栅格地图行走机器人,到底能干啥?[第五弹]——解锁蒙特卡洛定位功能
    目录1、前言2、增加的功能3、主要算法python实现3.1定义一个地图和固定标签3.2定义一个粒子3.3定义一个粒子管理类3.4定义粒子运动模型3.5定义观测模型3.6定义权重计算3.6更新粒子重采样4总结5、python源码1、前言在现代科技的普及下,人们对于机器人的兴趣与期待日......
  • 262:vue+openlayers 移动地图获取中心点经纬度信息
    第262个点击查看专栏目录本示例介绍演示如何在vue+openlayers中移动地图并获取中心点经纬度信息。这里主要用到了是view的getCenter方法,这一功能在实际项目中很有用,能给出一个清晰的定位。直接复制下面的vue+openlayers源代码,操作2分钟即可运行实现效果文......