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

效果
在这里插入图片描述

代码
首先在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>
1
2
3
4
5
6
7
8

页面中：

<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
index = " +
          e.fromitem.index +
          "
value = " +
          value;

        value = "";
        if (e.toitem.index > -1) {
          _value = e.toitem.value;
          value =
            _value.province +
            _value.city +
            _value.district +
            _value.street +
            _value.business;
        }
        str +=
          "
ToItem
index = " +
          e.toitem.index +
          "
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
index = " +
          e.item.index +
          "
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>

  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136

相关阅读:
C++ 并发编程实战第六章设计基于锁的并发数据结构
 一篇文章教会你写一个贪吃蛇小游戏（纯C语言）
面试题-3
配电室电力监控系统：实时掌握电力运行状况
 基于Java的企业人事管理系统设计与实现(源码+lw+ppt+部署文档+视频讲解等)
C#编程流程控制与集合类型
 05_模板引擎
 Spring学习笔记6 Bean的实例化方式
 英语语法笔记
 供应链高效管理供应商
原文地址：https://blog.csdn.net/weixin_45609659/article/details/132718203