vue使用百度地图实现地点查询

news2025/1/8 19:55:43

效果
在这里插入图片描述

代码
首先在index.html中引入script：

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>地图</title>
  <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=地图密钥"></script>
</head>

页面中：

<template>
  <div class="hello">
    <div id="l-map"></div>
    <div id="r-result">
      请输入:<input
        type="text"
        id="suggestId"
        size="20"
        value="百度"
        style="width: 150px"
      />
    </div>
    <div
      id="searchResultPanel"
      style="
        border: 1px solid #c0c0c0;
        width: 150px;
        height: auto;
        display: none;
      "
    ></div>
  </div>
</template>
  
  <script>
export default {
  name: "baiduMap",
  data() {
    return {
      autocomplete: null,
    };
  },
  methods: {
    initMap() {
      let map = new BMapGL.Map("l-map");
      map.centerAndZoom("北京", 12); // 初始化地图,设置城市和地图级别。

      this.autocomplete = new BMapGL.Autocomplete({
        //建立一个自动完成的对象
        input: "suggestId",
        location: map,
      });
      this.autocomplete.addEventListener("onhighlight", function (e) {
        //鼠标放在下拉列表上的事件
        var str = "";
        var _value = e.fromitem.value;
        var 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;
      });
      let myValue;
      this.autocomplete.addEventListener("onconfirm", function (e) {
        //鼠标点击下拉列表后的事件
        var _value = e.item.value;
        myValue =
          _value.province +
          _value.city +
          _value.district +
          _value.street +
          _value.business;
        document.getElementById("searchResultPanel").innerHTML =
          "onconfirm<br />index = " +
          e.item.index +
          "<br />myValue = " +
          myValue;

        setPlace();
      });

      function setPlace() {
        map.clearOverlays(); //清除地图上所有覆盖物
        function myFun() {
          var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
          map.centerAndZoom(pp, 18);
          map.addOverlay(new BMapGL.Marker(pp)); //添加标注
        }
        var local = new BMapGL.LocalSearch(map, {
          //智能搜索
          onSearchComplete: myFun,
        });
        local.search(myValue);
      }
    },
  },
  mounted() {
    this.initMap();
  },
};
</script>
<style lang="scss" scoped>
body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: "微软雅黑";
  font-size: 14px;
}
#l-map {
  height: 360px;
  width: 100%;
}
#r-result {
  width: 100%;
}
</style>