Javascript

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的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!