vue引入百度地图vue-baidu-map

本文主要是介绍vue引入百度地图vue-baidu-map，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

首先，安装

npm i vue-baidu-map --save

会遇到跨域的问题就需要引入jsonp来解决(只能解决get请求，刚好这里的请求都是get请求)

npm i vue-jsonp -S

然后引入

//main.js
import BaiduMap from "vue-baidu-map";
import { VueJsonp } from "vue-jsonp";
Vue.use(VueJsonp);
Vue.use(BaiduMap, {
  ak: "你在百度开发者文档中申请的key"
});

ps:我这里申请的是服务端的key

在需要的页面贴上如下代码

//xxxx.vue
<template>
 <baidu-map class="map" :center="this.frameCenter" :zoom="this.zoom">
   <baidu-map class="map" :center="this.frameCenter" :zoom="this.zoom">
      <!-- 放大缩小 -->
      <bm-navigation type="BMAP_NAVIGATION_CONTROL_SMALL" anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      <!-- 标记点 -->
      <bm-marker :position="{ lng: markers.lng, lat: markers.lat }" :dragging="true" @dragend="getMapCenter">
      </bm-marker>
      </baidu-map>
 </baidu-map>
</template>

zoom设置的事比例尺大小。center是地图显示位子的中心，center的值可以是经纬度，也可以是详细的地址

我的需求是要根据省市区地图自动跳转，然后最后拖拽标记点获取该地点的经纬度

百度地图的行政区划查询服务功能是在2021年3月3号才出来的，好像存在跨域问题（试过好几次都这样，也可能是太菜了）

这里我就想了一个骚操作调用的是高德地图的数据，emmmmm~~反正数据源的问题解决了

地理编码

//xxx.vue
this.$jsonp("http://api.map.baidu.com/geocoding/v3/", {
        address: '湖北省武汉市xxxx',
        output: "json",
        ak: "你在百度开发者文档中申请的key"
      })
        .then(res => {
        console.log(res)
        })
        .catch(err => {
          console.log(err);
        });

可能会出现的问题就是有写地址名字差不太多就会导致，标记点不在画框内，将上面的逆地址解析简单的封装一下，然后用获得的经纬度去做定位要更加准确一些。

这篇关于vue引入百度地图vue-baidu-map的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！