Vue 腾讯地图：绘制线和点

好的，以下是使用 Vue-腾讯地图来绘制地图的示例：

绘制线

1. 创建地图实例。

   import Vue from 'vue';
   import TencentMap from 'vue-tencent-map';
   
   Vue.use(TencentMap);
   
   new Vue({
     el: '#app',
     data: {
       mapCenter: [121.49873, 31.23944],
       mapZoom: 12,
       polyline: null,
       markers: []
     },
     methods: {
       drawLine() {
         this.polyline = new TencentMap.Polyline({
           path: [
             [121.49873, 31.23944],
             [121.50095, 31.23485],
             [121.50317, 31.23026]
           ],
           editable: true
         });
         this.polyline.setMap(this.$refs.map.mapInstance);
       },
       editLine() {
         this.polyline.setEditable(true);
       },
       deleteLine() {
         this.polyline.setMap(null);
       }
     },
     mounted() {
       this.drawLine();
     }
   });
   

2. 添加事件监听器。

   this.polyline.on('click', (e) => {
     console.log('Polyline clicked.');
   });
   
   this.polyline.on('dblclick', (e) => {
     console.log('Polyline double clicked.');
   });
   
   this.polyline.on('mousedown', (e) => {
     console.log('Polyline mousedown.');
   });
   
   this.polyline.on('mouseup', (e) => {
     console.log('Polyline mouseup.');
   });
   
   this.polyline.on('mousemove', (e) => {
     console.log('Polyline mousemove.');
   });
   

3. 设置线样式。

   this.polyline.setStrokeColor('#FF0000');
   this.polyline.setStrokeOpacity(0.8);
   this.polyline.setStrokeWeight(2);
   

绘制点

1. 创建地图实例。

   import Vue from 'vue';
   import TencentMap from 'vue-tencent-map';
   
   Vue.use(TencentMap);
   
   new Vue({
     el: '#app',
     data: {
       mapCenter: [121.49873, 31.23944],
       mapZoom: 12,
       markers: []
     },
     methods: {
       addMarker() {
         const marker = new TencentMap.Marker({
           position: [121.49873, 31.23944],
           title: 'Marker title',
           content: 'Marker content'
         });
         marker.setMap(this.$refs.map.mapInstance);
         this.markers.push(marker);
       },
       editMarker() {
         this.markers[0].setTitle('New marker title');
         this.markers[0].setContent('New marker content');
       },
       deleteMarker() {
         this.markers[0].setMap(null);
         this.markers.shift();
       }
     },
     mounted() {
       this.addMarker();
     }
   });
   

2. 添加事件监听器。

   this.markers[0].on('click', (e) => {
     console.log('Marker clicked.');
   });
   
   this.markers[0].on('dblclick', (e) => {
     console.log('Marker double clicked.');
   });
   
   this.markers[0].on('mousedown', (e) => {
     console.log('Marker mousedown.');
   });
   
   this.markers[0].on('mouseup', (e) => {
     console.log('Marker mouseup.');
   });
   
   this.markers[0].on('mousemove', (e) => {
     console.log('Marker mousemove.');
   });
   

3. 设置点样式。

   this.markers[0].setIcon('http://lbs.qq.com/web/webmap/img/marker.png');
   this.markers[0].setShadow('http://lbs.qq.com/web/webmap/img/shadow.png');
   

编辑和删除

要编辑或删除线或点，只需调用相应的方法即可。

this.polyline.setEditable(true);
this.polyline.setMap(null);
this.markers[0].setTitle('New marker title');
this.markers[0].setMap(null);

结论

Vue-腾讯地图是一个功能强大的地图库，它可以帮助您轻松地在地图上绘制线、点和其他图形。它还提供了丰富的事件监听器，让您可以轻松地处理用户交互。