this.map.on("mouseenter", "point", () => { _this.map.setPaintProperty("point", "circle-color", "#3bb2d0"); _this.canvas.style.cursor = "move";

同样的还有“mouseleave”、“mousedown”事件：

this.map.on("mousedown", "point", (e: any) => { e.preventDefault(); _this.canvas.style.cursor = "grab"; _this.map.on("mousemove", _this.onMove); _this.map.once("mouseup", _this.onUp); this.map.on("touchstart", "point", (e: any) => { if (e.points.length !== 1) return; e.preventDefault(); _this.map.on("touchmove", _this.onMove); _this.map.once("touchend", _this.onUp);

注：“_this”是通过“劫持”全局 this 从而可以指向需要的函数。贴上这次的完整代码：

<template>
  <div id="first-map">
    <pre id="coordinates" class="coordinates"></pre>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import axios from "axios";
// @ts-ignore
import mapboxgl from "mapbox-gl";
@Component({})
export default class Map extends Vue {
  private map: any;
  private coordinates: any;
  private canvas: any;
  private geojson: any;
  private initMap() {
    mapboxgl.accessToken =
      "pk.eyJ1IjoiaGFqY2tlciIsImEiOiJjazJ5ZWhleTgwMW9pM2RxaTRjOXFkZW9zIn0.Z1RgDBBWGm4BjuvbPtqw0w";
    this.map = new mapboxgl.Map({
      container: "first-map",
      style: "mapbox://styles/hajcker/ck382fdsu0nia1cocmp6tf3vm",
      center: [120.57034514036286, 31.251418083207284],
      zoom: 15
    axios.get("../data/Taihu.json").then(res => {
      this.map.on("load", () => {
        this.map.addLayer({
          id: "taihu",
          type: "fill",
          source: {
            type: "geojson",
            data: res.data
          layout: {},
          paint: {
            "fill-color": "#088",
            "fill-opacity": 0.8
    this.canvas = this.map.getCanvasContainer();
    this.coordinates = document.getElementById("coordinates");
    axios.get("../data/Point.json").then(res => {
      this.geojson = res.data;
      this.map.on("load", () => {
        this.map.addSource("point", {
          type: "geojson",
          data: this.geojson
        this.map.addLayer({
          id: "point",
          type: "circle",
          source: "point",
          paint: {
            "circle-radius": 10,
            "circle-color": "#3887be"
        let _this = this;
        this.map.on("mouseenter", "point", () => {
          _this.map.setPaintProperty("point", "circle-color", "#3bb2d0");
          _this.canvas.style.cursor = "move";
        this.map.on("mouseleave", "point", () => {
          _this.map.setPaintProperty("point", "circle-color", "#3887be");
          _this.canvas.style.cursor = "";
        this.map.on("mousedown", "point", (e: any) => {
          e.preventDefault();
          _this.canvas.style.cursor = "grab";
          _this.map.on("mousemove", _this.onMove);
          _this.map.once("mouseup", _this.onUp);
        this.map.on("touchstart", "point", (e: any) => {
          if (e.points.length !== 1) return;
          e.preventDefault();
          _this.map.on("touchmove", _this.onMove);
          _this.map.once("touchend", _this.onUp);
  private onMove(e: any) {
    const coords = e.lngLat;
    this.canvas.style.cursor = "grabbing";
    this.geojson.features[0].geometry.coordinates = [coords.lng, coords.lat];
    this.map.getSource("point").setData(this.geojson);
  private onUp(e: any) {
    const coords = e.lngLat;
    this.coordinates.style.display = "block";
    this.coordinates.innerHTML =
      "Longitude: " + coords.lng + "<br />Latitude: " + coords.lat;
    this.canvas.style.cursor = "";
    this.map.off("mousemove", this.onMove);
    this.map.off("touchmove", this.onMove);
  private mounted() {
    this.initMap();
</script>
<style scoped lang="scss">
#first-map {
  height: 800px;
  width: 800px;
  margin: auto;
  position: relative;
  .coordinates {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    position: absolute;
    bottom: 40px;
    left: 10px;
    padding: 5px 10px;
    margin: 0;
    font-size: 11px;
    line-height: 18px;
    border-radius: 3px;
    display: none;
    z-index: 1;
</style>