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

效果
vue使用百度地图实现地点查询_第1张图片
vue使用百度地图实现地点查询_第2张图片
代码
首先在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
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>

你可能感兴趣的:(地图,vue.js)