标签：map Vue point addComp 搜索 var new BMap 百度

要求能定位到国外 及 查看了文档 百度支持东南亚大部分地区  满足需求 从而使用百度地图


<template>
  <div class="addHospital">
      <div class="map" v-loading="loading">
        <el-input placeholder="请输入搜索地址" v-model="mapName" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="mapNameChange"></el-button>
        </el-input>
        <div style="padding:10px 0;" v-if="mapPointName">当前选中：{{mapPointName}}</div>
        <div id="container" style="height: 400px; width: 100%" ref="allmap"></div>
        <div class="map-btn">
          <el-button type="primary" @click="dialogMap = false">确认</el-button>
        </div>
      </div>
  </div>
</template>

<script>
let map = null,
  geoc = null;
export default {
  name: "addHospital",
  data() {
    return {
      dialogMap: false,
      mapName: "",
      mapPointName: "",
      loading:true,
      mapGetshow: true,
      dialogName: ""
    };
  },
  created() {this.mapBuild()},
  methods: {
    //搜索地图
    mapNameChange() {
      let that = this,
        point,
        marker = null;
      let local = new BMap.LocalSearch(map, {
        renderOptions: { map: map },
        onSearchComplete: res => {
          if (local.getResults() != undefined) {
            map.clearOverlays(); //清除地图上所有覆盖物
            if (local.getResults().getPoi(0)) {
              point = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
              map.centerAndZoom(point, 10);
              marker = new BMap.Marker(point); // 创建标注
              map.addOverlay(marker); // 将标注添加到地图中
              marker.enableDragging(); // 可拖拽
              geoc.getLocation(point, function(rs) {
                var addComp = rs.addressComponents;
                console.log(addComp);
                that.mapPointName =
                  addComp.province +
                  ", " +
                  addComp.city +
                  ", " +
                  addComp.district +
                  ", " +
                  addComp.street +
                  ", " +
                  addComp.streetNumber;
                  
              });
            } else {
              alert("未匹配到地点!可拖动地图上的红色图标到精确位置");
            }
          } else {
            alert("未找到搜索结果");
          }
        }
      });
      local.search(this.mapName);
    },
    //地图显示
    mapBuild() {
      let that = this;
      this.dialogMap = !this.dialogMap;
      setTimeout(function() {
        if (that.mapGetshow) {
          map = new BMap.Map("container");
          geoc = new BMap.Geocoder();
          let point = new BMap.Point(116.3964, 39.9093);
          map.centerAndZoom(point, 10);
          map.enableScrollWheelZoom();
          var geolocation = new BMap.Geolocation();
          //定位
          geolocation.getCurrentPosition(
            r => {
              console.log(r);
              var mk = new BMap.Marker(r.point);
              map.addOverlay(mk);
              map.panTo(r.point);
              geoc.getLocation(r.point, function(rs) {
                var addComp = rs.addressComponents;
                console.log(addComp);
                that.mapPointName =
                  addComp.province +
                  addComp.city +
                  addComp.district +
                  addComp.street +
                  addComp.streetNumber;
                  that.loading = false;
                that.mapGetshow = false;
              });
            },
            { enableHighAccuracy: true }
          );
          //鼠标点击
          map.addEventListener("click", function(e) {
            console.log(e);
            var pt = e.point;
            var marker = new BMap.Marker(pt); // 创建标注
            map.clearOverlays();
            map.addOverlay(marker);
            geoc.getLocation(pt, function(rs) {
              var addComp = rs.addressComponents;
              console.log(addComp);
              that.mapPointName =
                addComp.province +
                addComp.city +
                addComp.district +
                addComp.street +
                addComp.streetNumber;
            });
          });
        }
      }, 1000);
    }
  }
};
</script>
<style scoped lang="scss">
@import "../../filters/css/all.css";
.addHospital {
  width: 100%;
  height: 100%;
  .map {
    padding: 10px;
    .input-with-select {
    }
    .map-btn {
      padding: 10px 20px;
      margin: auto;
      text-align: right;
      button {
        padding: 12px 30px;
      }
    }
  }
}
</style>

标签：map,Vue,point,addComp,搜索,var,new,BMap,百度
来源： https://www.cnblogs.com/wukongz/p/11900395.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。