Vue集成百度地图

最新推荐文章于 2024-07-18 10:55:30 发布

cc写代码

最新推荐文章于 2024-07-18 10:55:30 发布

阅读量389

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_66710237/article/details/126109947

版权

该博客介绍了如何在Vue项目中集成百度地图插件，通过npm安装vue-baidu-map，并在main.js中设置ak。示例代码展示了如何创建地图、显示城市选择列表以及在地图上添加可拖动的标记，并根据预定义的经纬度列表显示多个标记，每个标记附带地址信息。此外，还提供了查询和关闭信息窗口的功能。

摘要由CSDN通过智能技术生成

软件部分

注册百度地图开放平台

进入控制台

创建应用

复制你的ak

Vue部分

下载百度地图插件 :

npm i -S vue-baidu-map

main.js中引入

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: 'YOUR_APP_KEY'
})

vue页面

<template>
  <baidu-map :center="center" :zoom="zoom" @ready="handler"></baidu-map>
</template>
<script>
export default {
  data () {
    return {
      center: {lng: 0, lat: 0},
      zoom: 3
    }
  },
  methods: {
    handler ({BMap, map}) {
      console.log(BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15
    }
  }
}
</script>

例子:

写了一个显示自定义地区定点的vue

具体代码如下

<template>

  <div>

    <baidu-map class="bm-view" :center="center" :zoom="zoom" @ready="handler">

      <!-- 查询城市 -->
      <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>

        <!-- 定点 premisesList是我的列表 里面有经纬度以及地址 -->

        <bm-marker v-for="premises in premisesList" 
                   <!-- lng:经度 lat:维度 -->
                   :position="{lng: premises.longItude,lat: premises.latItude}"
                   :dragging="true"
                   animation="BMAP_ANIMATION_BOUNCE">
                    
          <!-- address是我的地址 -->
          <bm-label :content="premises.address"
                    :labelStyle="{color: 'red', fontSize : '5px'}"
                    :offset="{width: -35, height: 30}"/>
        </bm-marker>

    </baidu-map>


  </div>

</template>

<script>

<!-- 调用房屋列表 -->
import { listPremises } from "@/api/houses/premises";

export default {
  name: "MapVGL",
  data () {
    return {
      premisesList:[],
      keyword: '',
      infoWindow: {
        show: true,
        contents: 'this'
      },
      center: {lng: 0, lat: 0},
      zoom: 3
    }
  },
  methods: {

    /** 查询楼盘信息列表 */
    getList() {
      listPremises(this.queryParams).then(response => {
        this.premisesList = response.rows;
        console.info(this.premisesList)
      });
    },

    handler ({BMap, map}) {
      console.log(BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15
    },

    infoWindowClose (e) {
      this.infoWindow.show = false
    },

    infoWindowOpen (e) {
      this.infoWindow.show = true
    },

    clear () {
      this.infoWindow.contents = ''
    }

  },
  created() {
    this.getList();
  }
}
</script>

<style scoped>

.bm-view {
  width: 100%;
  height: 500px;
}

</style>