想学做个定位小程序咩？跟着我学呗，只要会Vue和Canvas这俩前端技术就行！先把基础打好，然后加上地图和画点那些重要功能即可。搞定这几步，你的定位小程序就大功告成咯~

准备工作

想用Vue搭个呼朋唤友定位的应用？别急，搞定环境是关键！首先，咱们得用Vue CLI帮忙，这货能让你快速搞定Vue项目，比建游戏城还方便！敲下命令，就能轻松创建新的项目啦～

接下来，要装Canvas干大事儿！Canvas就像是HTML5给咱们的神奇画盘，想怎么画就怎么画！有了Canvas和它的小伙伴们，就能在Vue中开心地画出精彩地图！

vue create geo-marking-app
cd geo-marking-app

对了，别忘了装几个好用的软件哈~比如说vue2-google-maps libraries、MarkerDrawer组件啥的，这些东西都能让我们更顺手地完成地图定位功能！

npm install canvas-prebuilt

创建地图组件

首先，你得搞个Vue组件，把地图跟位置都放进去。整个儿放在src/components/的Map.vue里就行！再借助vue2-google-maps这个神器，就能搞定显示地图还有设置位置标记了！

npm install vue2-google-maps

在Map.vue这玩意儿上，咱们就直接把北京定位为地图核心焦点，之后鼠标点击就能添加标签，这些都会储存在数组里面，方便大家后面的操作~

创建标记绘制组件

  

    
      
    
  


import { gmapApi } from "vue2-google-maps";
export default {
  data() {
    return {
      center: { lat: 0, lng: 0 },
      zoom: 10,
      markers: []
    };
  },
  methods: {
    handleMapClick(event) {
      const { latLng } = event;
      const position = {
        lat: latLng.lat(),
        lng: latLng.lng()
      };
      this.markers.push({ position });
    }
  },
  mounted() {
    gmapApi().then(() => {
      this.center = { lat: 39.9075, lng: 116.3972 };
    });
  }
};

除了地图和标记之外，还得搞个Vue组件调出这些标识的图案。直接在src/components里建一个新文件，名字就叫MarkerDrawer.vue。这玩意儿就是用Canvas写好图案就完事儿了。

有了Canvas环境，咱们只要时刻留心鼠标的动静（比如按、移和放）就成了，这样就能在Canvas上肆无忌惮地画画写字。而且立马就能见到效果是不是感觉方便多了？

整合组件

搞定了展示地图和画标注这两个重要任务后，我们需要在App.vue文件里把Map组件和MarkerDrawer组件连接起来。把这俩家伙“撮合”到一块，把他们请进这个页面，这样就能看到所有的定位标记。

搞定！现在开始玩耍！启动命令后，看看浏览器是不是按照预定的端口打开应用了。然后试着输入地图中心点，添加标注，再把它们连接成图形放到Canvas上哈~

  

    
  


export default {
  data() {
    return {
      isDrawing: false,
      context: null,
      prevX: null,
      prevY: null
    };
  },
  mounted() {
    const canvas = this.$refs.canvas;
    this.context = canvas.getContext("2d");
  },
  methods: {
    startDrawing(event) {
      this.isDrawing = true;
      const { offsetX, offsetY } = event;
      this.prevX = offsetX;
      this.prevY = offsetY;
    },
    draw(event) {
      if (!this.isDrawing) {
        return;
      }
      const { offsetX, offsetY } = event;
      this.context.beginPath();
      this.context.moveTo(this.prevX, this.prevY);
      this.context.lineTo(offsetX, offsetY);
      this.context.stroke();
      this.prevX = offsetX;
      this.prevY = offsetY;
    },
    stopDrawing() {
      this.isDrawing = false;
    }
  }
};

总结与展望

快来看看这篇文章！保证看完后你会明白如何运用Vue和Canvas制作地理定位APP。你可能不知道，Vue framework的数据驱动真的很强大，然后Canvas的画图能力也不赖，这两者配合起来，就能制造出超级炫酷又实用的地理定位APP！

让我们来搞搞小变化，加点新功能，提高大家用起来的舒适度，比如说加入找地点和路线这种实用的功能~希望这个分享对你有帮助了，开动脑筋，让网页应用变得更加酷炫又好用！

  

    
地理位置标记应用
    


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

谢谢你关注这个文章！如果有啥不明白或想补充的，就留言告诉咱们！希望你码农工作顺利开心！