关于Vue项目中引入百度地图的简单方法

最新推荐文章于 2024-09-10 19:01:04 发布

匆匆过客罢了

最新推荐文章于 2024-09-10 19:01:04 发布

阅读量426

点赞数

分类专栏： Web 文章标签： vue

本文链接：https://blog.csdn.net/qq_42498458/article/details/119650100

版权

Web 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

使用百度地图js API 前，需要申请应用的ak 秘钥，在官网上自己申请即可；

下载相关依赖：

npm install vue-baidu-map --save

普通的 html 文件中只要给定script标签如： <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=自己的ak秘钥"></script>

如下：

地图下代码如下：

<template>
  <el-row class="warp">
    <el-col :span="24" class="warp-main">
      <div>
        <div id="allmap"></div>
      </div>
    </el-col>
  </el-row>
</template>
<script>
  export default{
 name: 'bd-map',
  props: {
    pname: {
      type: String,
      default: function () {
        return '北京'
      }
    }
  },
  data () {
    return {
      info: ''
    }
  },
  methods: {
    initMap () {
      // 初始化地图
      let map = new window.BMap.Map('allmap')
      let point = new window.BMap.Point(116.331398, 39.897445)
      map.centerAndZoom(point, 12)
      window.map = map
    },
    resetPostion () {
      // 重设地图坐标
      let myGeo = new window.BMap.Geocoder()
      // 将地址解析结果显示在地图上,并调整地图视野
      myGeo.getPoint(this.pname, function (point) {
        if (point) {
          window.map.centerAndZoom(point, 16)
          window.map.addOverlay(new window.BMap.Marker(point))
        } else {
          alert('您选择地址没有解析到结果!')
        }
      }, '北京市')
    }
  },
  watch: {
    pname: function (newValue, oldValue) {
      this.resetPostion()
    }
  },
  mounted () {
    this.initMap()
    this.resetPostion()
  }
  }
</script>
<style scoped>
  #allmap {
    width: 100%;
    height: 500px;
    background-color: lightgreen;
  }
</style>

比较简单的vue脚手架项目引入百度地图的方法，希望能帮助到你们。