vue+elementui 调用百度地图获取经纬度

最新推荐文章于 2024-09-06 16:12:22 发布

xniYa!

最新推荐文章于 2024-09-06 16:12:22 发布

阅读量1k

点赞数 2

分类专栏： element 文章标签： vue.js elementui javascript

原文链接：https://blog.csdn.net/m0_58373910/article/details/124755809

版权

element 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

申请百度地图api
登录百度帐号
下载百度地图插件
```
npm install vue-baidu-map --save
```

引入页面

<div class="map" ref="map">
            <!-- 地图实例 -->
            <baidu-map
              class="bmView"
              :scroll-wheel-zoom="true"
              :center="location"
              :zoom="zoom"
              @ready="handler"
              ak="xxx"
            >
              <!-- 地图显示 -->
              <bm-view style="width: 100%; height: 400px; flex: 1"></bm-view>
              <!-- 标记点组件 -->
              <bm-marker
                :position="{ lng: location.lng, lat: location.lat }"
              ></bm-marker>
              <!-- 搜索控件 -->
              <bm-control>
                <bm-auto-complete
                  v-model="form1.address"
                  :sugStyle="{ zIndex: 999999 }"
                  @confirm="handleConfirm"
                >
                  <el-input
                    v-model="form1.address"
                    placeholder="请输入地址来直接查找相关位置"
                    style="width: 500px"
                  ></el-input>
                </bm-auto-complete>
              </bm-control>
            </baidu-map>
          </div>

import {BaiduMap,BmView,BmMarker,BmControl,BmAutoComplete} from "vue-baidu-map";

components: {
	    BaiduMap,
	    BmMarker,
	    BmView,
	    BmControl,
	    BmAutoComplete,
	  },	
  data() {
    return {  // 要搜索的关键词
	      BMap: null,
	      // 地图显示的中心坐标
	      location: {
	        lng: 108.3444553,
	        lat: 22.81879829,
	      },
	      // 缩放，15基本上就可以看附近的一些街道了
	      zoom: 15,
	      keyWord: ""
         }
    }

handler(BMap) {
	      this.BMap = BMap;
	    },
	    handleConfirm({ item }) {
	      const that = this;
	      let queryString = `${item.value.city}${item.value.district}${item.value.business}`;
	      var myGeo = new BMap.Geocoder();
	      myGeo.getPoint(queryString, function (point) {
	        if (point) {
	          console.log(point, "point");
	          that.location = point;
	        }
	      });
	    }

完成