Vue小白也能搞定！3步教你实现地图标注神器

准备工作

搞定Vue做地图标注前，咱们要有几个步骤。首先，得了解一下Vue.js？然后，拿百度地图API举个栗子，去注册个开发者账号，特别重要的就是搞到保密钥匙（AK）这个玩意儿！最后，要是想看看标注好的地图长什么样儿，就得找些好看的图标装饰一下地图，网上有很多IconFont这类网站都能解决！

创建Vue项目

搭个新Vue项目超简单的！敲入vue CLI命令就行了。有这个小工具在手，你马上都能搞出Vue.js框架咯~

添加百度地图API

直接改’public/index.html’这个文件搞定。别忘了加个百度地图API的插件~记得把 KEY 替换为你自己的密码，不然程序跑不起来。

# 安装Vue CLI
npm install -g @vue/cli
# 创建一个新的Vue项目
vue create map-demo
cd map-demo
# 启动开发服务器
npm run serve

创建地图组件

    ...
    
    ...


    ...

别纠结，直接往 src/components 扔组件就得了，比如Map.vue。用BMap.Map搭建地图骨架，然后加上BMap.Marker做标注，别忘了加click事件和reactive属性，这样就妥妥的！

使用地图组件

来看看咱们之前是不是在那个叫App.vue的文件里面弄了个Map.vue呀？这个功能就可以让地图跑进APP里了，之前加的那些标记也都还在！

  



export default {
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 创建地图实例
      const map = new BMap.Map('map');
      // 设置默认显示的地图中心点
      const point = new BMap.Point(121.48, 31.22);
      map.centerAndZoom(point, 11);
      // 开启鼠标滚轮缩放
      map.enableScrollWheelZoom();
      // 添加标注
      const marker = new BMap.Marker(point);
      map.addOverlay(marker);
      // 添加标注点击事件
      marker.addEventListener('click', () => {
        alert('你点击了标注！');
      });
    },
  },
};

添加标注动画效果

想要标记得动起来吗？很简单！给Map.vue加个marker-animate动画，它就能在一秒钟内收缩放大好几回，美得无法形容！

搞定这下咱就能给Vue项目加些有趣的图标。这段时间学习挺用心，现在应该能写出不少好玩儿的Vue.js应用来了？而且还掌握了如何使用百度地图API，让地图也变得蛮酷的~

进一步探索

  

    


import Map from './components/Map.vue';
export default {
  components: {
    Map,
  },
};

你说对了，咱可以搞点别的玩意儿~比如说学会怎么用Vuex轻轻松松搞定那些看起来头大的交互过程；再或者，去了解一下那些高效实用的第三方库，像axios这类神器可以帮我们快速获取数据和连接后端。别忘了，提升网页刷新的效率也是非常有必要滴！这样一来，咱们就可以把前端技能提升到新高度，做出更炫的项目喽！

告诉你，就是用Vue.js跟地图API搭班子，弄出个有点意思的网页来。对前端开发来说可是必备技能多试试多练练，就能做出超炫又好玩儿的东西了~

看完这篇文章和实例程序，学会用Vue做地图标注就不是事儿了！有可能你还会上瘾前端程序开发！

  

    

  


export default {
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const map = new BMap.Map('map');
      const point = new BMap.Point(121.48, 31.22);
      map.centerAndZoom(point, 11);
      map.enableScrollWheelZoom();
      // 添加标注
      const marker = new BMap.Marker(point);
      map.addOverlay(marker);
      // 添加标注点击事件
      marker.addEventListener('click', () => {
        alert('你点击了标注！');
      });
      // 添加标注动画效果
      marker.setAnimation(BMAP_ANIMATION_BOUNCE);
    },
  },
};


.marker {
  width: 30px;
  height: 30px;
  background-color: red;
  border-radius: 50%;
  animation: marker-animate 1s infinite;
}
@keyframes marker-animate {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

。