Examples to explain how to use Baidu Map API in Vue-Front-end Q&A-php.cn

Examples to explain how to use Baidu Map API in Vue

PHPz

Release： 2023-04-11 14:08:05

Original

1333 people have browsed it

Vue is a popular JavaScript framework that can build single-page web applications very quickly. Baidu Map API is a set of map APIs that allow developers to use it in a variety of applications. This article will introduce how to use Baidu Map API in Vue and group data points according to specific rules through examples.

Using Baidu Map API

Before using Baidu Map API, you need to obtain the key on Baidu Developer Platform. If you don’t have a key yet, you can go to [Baidu Developer Platform](https://lbsyun.baidu.com/) to apply.

Introducing the Baidu map JS file into the Vue project can be introduced in the index.html file through the script tag, or you can use webpack to package the JS file and introduce it.

<html>
  <head>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=your_app_key"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Copy after login

Use Vue's life cycle function to initialize the map object after the component is mounted, and bind the map to the component's data.

<template>
  <div id="map" style="height: 500px"></div>
</template>

<script>
export default {
  data() {
    return {
      map: null
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      this.map = new BMap.Map("map");
      this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
    }
  }
};
</script>

Copy after login

When there are multiple data points in the page, it is very troublesome to label each data point on the map. Here's how to use Baidu Maps API to group data points.

Map data point grouping

In the case of a large number of data points, grouping the data can better display the data and improve the efficiency of map drawing.

First, create a component that can render data points. In this component, the props format used for the latitude and longitude of the data points is defined.

<template>
  <i 
    class="iconfont icon-marker"
    :style="{
      color: color,
      fontSize: size + &#39;px&#39;,
      left: point.lng + &#39;px&#39;,
      top: point.lat + &#39;px&#39;
    }"
  ></i>
</template>

<script>
export default {
  props: {
    point: {
      type: Object,
      default() {
        return {
          lng: 0,
          lat: 0
        };
      }
    },
    size: {
      type: Number,
      default: 24
    },
    color: {
      type: String,
      default: "#FF0000"
    }
  }
};
</script>

Copy after login

Next, we will render multiple data points in the parent component (the map component). In order to distinguish different groups, a label for each data point is also defined.

<template>
  <div id="map"></div>
  <div v-for="(value, key) in markers" :key="key">
    <h2>{{ key }}</h2>
    <ul>
      <li v-for="point in value" :key="point.id">
        <MapMarker :point="point" :color="point.color" />
      </li>
    </ul>
  </div>
</template>

<script>
import MapMarker from "@/components/MapMarker.vue";

export default {
  data() {
    return {
      markers: {},
      map: null
    };
  },
  mounted() {
    this.initMap();
    this.renderMarkers();
  },
  methods: {
    initMap() {
      this.map = new BMap.Map("map");
      this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
    },
    renderMarkers() {
      const markerList = [
        {
          id: 1,
          lng: 116.381374,
          lat: 39.915146
        },
        {
          id: 2,
          lng: 116.403694,
          lat: 39.927552
        },
        {
          id: 3,
          lng: 116.413807,
          lat: 39.914235
        },
        {
          id: 4,
          lng: 116.399076,
          lat: 39.920051
        },
        ...
      ];

      const bounds = this.map.getBounds();
      const sw = bounds.getSouthWest();
      const ne = bounds.getNorthEast();

      markerList.forEach(marker => {
        const point = new BMap.Point(marker.lng, marker.lat);
        if (bounds.containsPoint(point)) {
          const { id, lng, lat } = marker;
          const group = Math.floor((lat - sw.lat) / (ne.lat - sw.lat) * 10);
          if (!this.markers[group]) this.markers[group] = [];
          this.markers[group].push({
            id,
            point,
            lng,
            lat,
            color: "#FF0000"
          });
        }
      });
    }
  },
  components: {
    MapMarker
  }
};
</script>

Copy after login

The above code demonstrates how to traverse the markerList in the map component, obtain the group corresponding to each point, and then render the marker within the group.

Done! Now we have implemented Vue to implement Baidu Map API management grouping. You can change the code to the appropriate application as needed.

The above is the detailed content of Examples to explain how to use Baidu Map API in Vue. For more information, please follow other related articles on the PHP Chinese website!