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

最新推荐文章于 2024-08-06 02:43:13 发布

拿回忆下酒

最新推荐文章于 2024-08-06 02:43:13 发布

阅读量471

点赞数 1

文章标签： vue nuxt vue-baidu-mao nuxt.config.js 百度地图

本文链接：https://blog.csdn.net/qq_38998250/article/details/115128188

版权

下载 vue-baidu-map

cnpm i --save vue-baidu-map

引入插件

百度ak申请—请戳这里~

全局注册

//在main.js 里面引入以下代码
import BaiduMap from 'vue-baidu-map'
import Vue from 'vue'
Vue.use(BaiduMap, {
  /* 需要注册百度地图开发者来获取你的ak */
  ak: '0ZhHuChEb1rmqT0tRmR9ouE7qSncd05S'
})

nuxt引入map.js

//1、新建map.js,将上诉代码复制进去

//2、nuxt.config.js 引入
export default {
    ...
	plugins: [
	     //element ui
    	{ src: "~/plugins/element-ui.js", ssr: false },
    	//vue-baidu-map
    	{ src: "~/plugins/map.js", ssr: false }
	]
    ...
}

使用

<template>
 <baidu-map 
          :center="center" 
          :zoom="zoom" 
          :double-click-zoom="true" 
          class="baidu-map-view" 
          
        >
          <bm-marker :position="en_center"  animation="BMAP_ANIMATION_BOUNCE">
          </bm-marker>
          <h6 class="title-box g-cen-cen g-back" @click="routerEnFn">地址定位</h6>
  </baidu-map>

</template>

<script>
export default {
  data (){
	return {
	   center:{lng: 116.487925, lat: 40.002525},
	   zoom:18
    }
  },
  methods :{
    //根据经纬度 定位
    routerCenterFn (e){
      window.open(`http://api.map.baidu.com/geocoder?location=${this.cn_center.lat},${this.cn_center.lng}&coord_type=bd09ll&output=html&src=webapp.baidu.openAPIdemo`)
    },
    //根据地址  定位
    routerAddressFn(e){
      window.open("http://api.map.baidu.com/geocoder?北京市天安门广场&output=html&src=webapp.baidu.openAPIdemo")
    }
  }
}

<style lang="scss" >
.contact-us-wrap{
  .BMap_cpyCtrl {
    display: none;
  }
  .anchorBL {
    display: none;
  }
  .baidu-map-view {
      width: 590px; 
      height: 300px;
      float: left;
      position: relative;
      border-radius: 4px;
      overflow: hidden;
      border: 1px solid #eee;
      .title-box{
        position: absolute;
        left: 0;
        top: 0;
        width: 279px;
        height: 60px;
        color: #fff;
        font-size: 20px;
        font-weight: 500;
        background:blue;
      }
    }
}
</style>