百度地图输入地名模糊查询，返回百度坐标，并自动标点。

需求：默认一个点，为甲方公司点，一个动态点为甲方服务点。

<template>
  <div>
    <div>
      <router-link to="/" tag="div">返回</router-link>
    </div>
    <input v-model="arr" @change="re" type="text" />
    <div id="container"></div>
    <div>{{ jinwei }}</div>
  </div>
</template>

<script>
export default {
  name: "vmedt",
  data() {
    return {
      map: null,
      stl: null,
      // 默认点
      stldian: null,
      // 动态点
      factory: null,
      // 输入值
      arr: null,
      // 默认点经纬
      stlCoordinate: {
        h: 120.655833,
        s: 31.394692,
      },
      // 动态点经纬
      factoryCoordinate: {
        h: null,
        s: null,
      },
      jinwei: null,
      sousuo: null,
    };
  },
  mounted() {
    this.ditu();
  },
  methods: {
    re() {
      this.ditu();
    },
    ditu() {
      // 下面代码会存在this指向问题,所以提升一下.
      let _this = this;
      //   地图初始化
      this.map = new BMap.Map("container");
      this.map.centerAndZoom(
        new BMap.Point(this.stlCoordinate.h, this.stlCoordinate.s),
        10
      );
      this.stl = new BMap.Point(this.stlCoordinate.h, this.stlCoordinate.s);
      // 开启滚动播放
      this.map.enableScrollWheelZoom(true);
      // 过滤输入搜索不能为空
      if (this.arr != null) {
        // 输入搜索
        this.map.centerAndZoom(this.arr, 11);
        var localSearch = new BMap.LocalSearch(this.map);
        //允许自动调节窗体大小
        localSearch.enableAutoViewport();

        // 获取动态点经纬
        localSearch.setSearchCompleteCallback(function (searchResult) {
          // 获取数据百度信息
          var poi = searchResult.getPoi(0);
          console.log(poi.point);
          _this.map.centerAndZoom(poi.point, 13);
          // 经纬度赋值
          _this.factoryCoordinate.h = poi.point.lng;
          _this.factoryCoordinate.s = poi.point.lat;
          // 重定义地地图中心的,以动态点为中心
          if (_this.factoryCoordinate.h != null) {
            _this.factory = new BMap.Point(
              _this.factoryCoordinate.h,
              _this.factoryCoordinate.s
            );
            // 创建动态点
            _this.factorydian = new BMap.Marker(_this.factory);
            _this.map.addOverlay(_this.factorydian);
            var optss = {
              width: 200,
              height: 50,
              title: "**********",
            };
            var infoWindows = new BMap.InfoWindow("地址：*********", optss);
            _this.factorydian.addEventListener("click", function () {
              _this.map.openInfoWindow(infoWindows, _this.factory);
            });
          }
        });
        localSearch.search(this.arr);
      }

      // 创建默认点
      this.stldian = new BMap.Marker(this.stl);
      this.map.addOverlay(this.stldian);
      //创建弹出框样式
      var opts = {
        // 宽
        width: 200,
        // 高
        height: 50,
        // 标题
        title: "苏州*******",
      };
      // 创建弹出框和弹窗内容
      var infoWindow = new BMap.InfoWindow("地址：苏州市********", opts);
      // 创建默认点的点击事件
      this.stldian.addEventListener("click", function () {
        //开启信息窗口
        _this.map.openInfoWindow(infoWindow, _this.stl); 
      });
    },
  },
};
</script>

<style>
#container {
  overflow: hidden;
  width: 800px;
  height: 800px;
  margin: 0;
  font-family: "微软雅黑";
}
</style>