Vue调用百度地图组件

wws741

初始化进入页面，跳到大西洋了，有设置中心点的，大佬们求指教

d199212

中心点确定是对的？

bhbhxy

看api文档或者官网示例，centerAndZoom

leqaq

吾爱币这么富足吗？这些东西文档上都有，多看看示例demo

root233

中心点的经纬度写反了吧

root233

代码贴出来看看

Prozacs

<template>
  <div id="all"
       class="chaxun">
    <div>
      <el-input id="suggestId"
                name="address_detail"
                prefix-icon="el-icon-search"
                class="input_style"
                v-model="address_detail"
                placeholder="请输出地址："></el-input>
    </div>
    <div id="allmap"
         class="map_class"></div>
  </div>
</template>
<script>
//import {MP} from '../../map'
export default {
  data () {
    return {
      address_detail: null, //详细地址
      userlocation: { lng: "", lat: "" },
    }
  },
  mounted () {
    this.$nextTick(function () {

      var th = this
      // 创建Map实例
      var map = new BMap.Map("allmap");
      // 初始化地图,设置中心点坐标，
      var point = new BMap.Point(112.953195, 28.164126); // 创建点坐标，中心的经纬度坐标
      map.centerAndZoom(point, 15);
      map.enableScrollWheelZoom();
      var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
        {
          "input": "suggestId"
          , "location": map
        })
      var myValue
      ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
        var _value = e.item.value;
        myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
        this.address_detail = myValue
        setPlace();
      });

      function setPlace () {
        map.clearOverlays();    //清除地图上所有覆盖物
        function myFun () {
          th.userlocation = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
          map.centerAndZoom(th.userlocation, 18);
          map.addOverlay(new BMap.Marker(th.userlocation));    //添加标注
        }

        var local = new BMap.LocalSearch(map, { //智能搜索
          onSearchComplete: myFun
        });
        local.search(myValue);

        //测试输出坐标（指的是输入框最后确定地点的经纬度）
        map.addEventListener("click", function (e) {
          //经度
          console.log(th.userlocation.lng);
          //维度
          console.log(th.userlocation.lat);

        })
      }

    })
  },
}
</script>
<style scoped>
  #allmap {
    width: 800px;
    height: 700px;
    font-family: "微软雅黑";
    border: 1px solid green;
  }
  .chaxun {
    width: 400px;
    margin-left: 20px;
  }
  .map_class {
    margin-top: 20px;
  }
  /* .caiji {
          margin-right: 20px;
        } */
</style>
刚好前两天写着玩的

快乐的鸡蛋黄

百度有坐标拾取器，找到地点拷贝经纬度

jasonz18

推荐一个百度地图的vue组件，刚用过，比较香
https://github.com/Dafrok/vue-baidu-map

Ricardo_M_Zh

查文档 可以默认设置当前登录ID坐标位置