Vue调用百度地图组件

wws741 发表于 2021-12-20 22:08

本帖最后由 wws741 于 2021-12-21 13:30 编辑

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

d199212 发表于 2021-12-21 08:05

中心点确定是对的？

bhbhxy 发表于 2021-12-21 08:07

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

leqaq 发表于 2021-12-21 09:12

本帖最后由 leqaq 于 2021-12-21 09:26 编辑

https://s2.loli.net/2021/12/21/2AyVlOg9fHYnv7U.png
吾爱币这么富足吗？这些东西文档上都有，多看看示例demo

root233 发表于 2021-12-21 09:24

中心点的经纬度写反了吧

root233 发表于 2021-12-21 09:24

代码贴出来看看

Prozacs 发表于 2021-12-21 09:28

<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>
刚好前两天写着玩的

快乐的鸡蛋黄 发表于 2021-12-21 09:28

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

jasonz18 发表于 2021-12-21 09:47

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

Ricardo_M_Zh 发表于 2021-12-21 09:55

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

页: [1] 2

吾爱破解 - 52pojie.cn's Archiver

Vue调用百度地图组件