vue项目引入百度地图

vue项目引入百度地图

<template>
  <div class="searchAddress">
    <van-nav-bar left-arrow title="选择地址" @click-left="onClickLeft" @click-right="onClickRight"></van-nav-bar>
    <div class="search">
      <div class="add" @click="showPopup">
        <van-icon name="location-o" />
        <span ref="city" v-model="location">{{LocationCity}}</span>
        <van-icon name="arrow-down" />
      </div>
      <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
        <van-area
          :area-list="areaList"
          :columns-num="2"
          title="选择地址"
          @confirm="sure"
          @cancel="cancel"
          @change="change"
        />
      </van-popup>
      <div id="l-map"></div>
      <!-- 搜索框 -->
      <form action="/">
        <div id="r-result">
          <van-search
            id="suggestId"
            show-action
            placeholder="请输入小区或大厦名"
            @search="onSearch()"
            @input="shuru()"
          >
            <template #action>
              <div @click="onSearch">搜索</div>
            </template>
          </van-search>
        </div>
        <div
          id="searchResultPanel"
          style="border:1px solid #C0C0C0;width:750px;height:auto; display:none;"
        ></div>
      </form>

      <!-- /搜索框 -->
    </div>
    <!-- <baidu-map :center="{lng: 116.403765, lat: 39.914850}" :zoom="11">
        <bm-view class="map"></bm-view>
        <bm-control :offset="{width: '10px', height: '10px'}">
         
        </bm-control>
        <bm-local-search :keyword="keyword" :auto-viewport="true" :location="location"></bm-local-search>
    </baidu-map>-->

    <!-- <baidu-map>
        <bm-view class="map"></bm-view>
        <bm-local-search   @click.native="map"  :keyword="keyword" :auto-viewport="true" :location="location">
         
        </bm-local-search>
    </baidu-map>-->
    <!-- 联想建议 -->
    <!-- <van-cell-group v-if="searchText">
      <van-cell
        icon="search"
        v-for="item in suggestions"
        :key="item"
        @click="onSearch(item)"
      >
        <div slot="title" v-html="highLight(item)"></div>
      </van-cell>
    </van-cell-group>-->
    <!-- /联想建议 -->
  </div>
</template>

<script>
import areaList from '../../assets/area/area.js'
import BMap from 'BMap'
export default {
  data() {
    return {
      areaList,
      values: '',
      show: false,
      suggestions: [],
      keyword: '',
      location: '北京',
      searchText: '',
      LocationCity: '点击设置地址', //给渲染层定义一个初始值
      locationDetails: ''
    }
  },
  methods: {
    shuru() {

    },
    onClickLeft() {
      this.$router.push('/drugstore')
    },
    onClickRight() {},
    onSearch(q) {
      this.map()
   
    },
    
    change() {
      // this.location=this.$refs.city
      console.log(this.$refs.city)
    },
    showPopup() {
      this.show = true
    },
    sure(e) {
      this.$refs.city.innerText = e[1].name
      this.location = e[1].name
      console.log(this.location)
      this.show = false
    },
    cancel() {
      this.show = false
    },
    city() {
      //定义获取城市方法
      const geolocation = new BMap.Geolocation()
      var _this = this
      geolocation.getCurrentPosition(
        function getinfo(position) {
          let city = position.address.city //获取城市信息
          let province = position.address.province //获取省份信息
          _this.LocationCity = city
        },
        function(e) {
          _this.LocationCity = '定位失败'
        },
        { provider: 'baidu' }
      )
    },
    map() {
      var _this = this

      // 百度地图API功能
      function G(id) {
        return document.getElementById(id)
      }

      var map = new BMap.Map('l-map')

      map.centerAndZoom(this.location, 12) // 初始化地图,设置城市和地图级别。

      var ac = new BMap.Autocomplete({ input: 'suggestId', location: map }) //建立一个自动完成的对象
      console.log(ac)

      ac.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
        G('searchResultPanel').innerHTML = str
      })

      var myValue
      // var _this=this
      ac.addEventListener('onconfirm', function(e) {
        //鼠标点击下拉列表后的事件
        var _value = e.item.value
        myValue =
          _value.province +
          _value.city +
          _value.district +
          _value.street +
          _value.business

        this.locationDetails = _value.street + _value.business
        console.log(this.locationDetails)
        G('searchResultPanel').innerHTML =
          'onconfirm<br />index = ' +
          e.item.index +
          '<br />myValue = ' +
          myValue
        setPlace()
        _this.$router.push({
          name: 'drugstore',
          params: { address: this.locationDetails }
        })
      })

      function setPlace() {
        // map.clearOverlays() //清除地图上所有覆盖物
        function myFun() {
          var pp = local.getResults().getPoi(0).point //获取第一个智能搜索的结果
          console.log(pp)
          console.log('经度：' + pp.lng, '纬度：' + pp.lat)
          map.centerAndZoom(pp, 18)
          map.addOverlay(new BMap.Marker(pp)) //添加标注
        }
        var local = new BMap.LocalSearch(map, {
          //智能搜索
          onSearchComplete: myFun
        })
        console.log(local)
        local.search(myValue)
      }
    },
    highLight(str) {
      const reg = new RegExp(this.searchText, 'gi')
      return str.replace(
        reg,
        `<span style="color: red;">${this.searchText}</span>`
      )
    }
  },
  updated() {
    this.$nextTick(() => {
      this.map()
    })
  },
  mounted() {
    this.city() //触发获取城市方法
  },
  created() {
  }
}
</script>

<style lang="less" scoped>
/deep/.tangram-suggestion-main,
/deep/#tangram-suggestion--TANGRAM__1f-main {
  width: 100% !important;
  width: 750px !important;
  margin-left: -100px !important;
}
.van-search--show-action {
  margin-left: 140px;
  height: 108px;
  border-bottom: 1px solid #ebedf0;
}
/deep/.van-search /deep/.van-cell {
  height: 70px;
  line-height: 70px;
}
/deep/.van-field__control {
  font-size: 26px;
}
/deep/.van-search__action {
  font-size: 30px;
}
/deep/.van-icon-search::before {
  font-size: 30px;
}
/deep/.van-picker__toolbar {
  height: 80px;
  font-size: 26px;
  line-height: 80px;
}
/deep/.van-picker__title {
  font-size: 30px;
}
/deep/.van-picker__cancel,
/deep/ .van-picker__confirm {
  font-size: 30px;
}
/deep/.van-picker-column__item {
  font-size: 30px;
}

.searchAddress {
  .search {
    height: 108px;
    border-bottom: 1px solid #ebedf0;
    .add {
      margin-left: 12px;
      float: left;
      height: 108px;
      line-height: 108px;
    }
  }
}
/deep/.map {
  /deep/ div {
    border: none !important;
    /deep/ a {
      display: none !important;
    }
  }
}
</style>