VUE 中引入百度地图(vue-Baidu-Map)

最新推荐文章于 2024-11-19 14:10:36 发布

weixin_30852451

最新推荐文章于 2024-11-19 14:10:36 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zqyw/p/11132152.html

本文介绍了如何在Vue项目中引入并使用百度地图。首先，通过安装vue-Baidu-Map库来开始集成过程。接着，详细说明了如何在main.js文件中全局注册组件。最后，展示了在Vue组件中实现地图展示的界面效果。

1、安装

$ npm install vue-baidu-map --save

2、全局注册，在main.js中引入以下代码

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  ak: '你申请的key'
})

3、界面

<template>
    <baidu-map :center="center" :zoom="zoom" @ready="handler" style="height:1080px" @click="getClickInfo" :scroll-wheel-zoom='true'>
    </baidu-map>
</template>
<script>
export default {
  name: 'TestBaiDu',
  data () {
    return {
      center: {lng: 109.45744048529967, lat: 36.49771311230842},
      zoom: 13
    }
  },
  methods: {
    handler ({BMap, map}) {
      var point = new BMap.Point(109.49926175379778, 36.60449676862417)
      map.centerAndZoom(po