Tips for implementing Baidu map search and display in Vue

With the advent of the Internet era, map applications have become an indispensable tool in daily life. Baidu Map is a popular map application, and implementing Baidu Map search and display in Vue is a very practical skill for many front-end developers. This article will introduce how to implement Baidu map search and display techniques in Vue.

1. Register Baidu Map API

First, we need to register an account on Baidu Map Open Platform and create an application, and then obtain the AK (Access Key).

Introduce Baidu Map JavaScript API into the project’s index.html and replace AK with your own AK:

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=your_ak"></script>

2. Implement Baidu Map Search

The implementation of Baidu map search requires the use of the API provided by Baidu Map. First, we need to create a form containing a search box and search button on the page.

<template>
  <div>
    <form @submit.prevent="onSearch">
      <input type="text" v-model="searchText" placeholder="请输入搜索关键字">
      <button type="submit">搜索</button>
    </form>
  </div>
</template>

Then define the searchText and onSearch methods in the Vue component:

<script>
  export default {
    data() {
      return {
        searchText: '',
      };
    },
    methods: {
      onSearch() {
        const local = new BMap.LocalSearch(this.$refs.map, {
          renderOptions: { map: this.$refs.map },
        });
        local.search(this.searchText);
      },
    },
  };
</script>

In the onSearch method, we use the BMap.LocalSearch instance to render the search results on the map.

3. Implement Baidu map display

Create a div container in the Vue component to display the map:

<template>
  <div>
    <div ref="map" style="height: 400px;"></div>
  </div>
</template>

In the created hook function of the Vue component , create a map instance and set the center point and zoom level.

<script>
  export default {
    data() {
      return {
        map: null,
      };
    },
    created() {
      const map = new BMap.Map(this.$refs.map);
      const point = new BMap.Point(116.404, 39.915);
      map.centerAndZoom(point, 15);
      this.map = map;
    },
  };
</script>

In the above code, we create a map instance and assign it to the map variable in the Vue component. By setting the center point and zoom level, we can control the map's initial position and display size.

4. Complete code

Finally, we combine the search and display codes to get a complete Baidu map component:

<template>
  <div>
    <form @submit.prevent="onSearch">
      <input type="text" v-model="searchText" placeholder="请输入搜索关键字">
      <button type="submit">搜索</button>
    </form>
    <div ref="map" style="height: 400px;"></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        searchText: '',
        map: null,
      };
    },
    created() {
      const map = new BMap.Map(this.$refs.map);
      const point = new BMap.Point(116.404, 39.915);
      map.centerAndZoom(point, 15);
      this.map = map;
    },
    methods: {
      onSearch() {
        const local = new BMap.LocalSearch(this.$refs.map, {
          renderOptions: { map: this.$refs.map },
        });
        local.search(this.searchText);
      },
    },
  };
</script>

Through the above With these steps, we can easily implement Baidu map search and display in Vue. Of course, this is just a simple example, and actual projects may involve more functions and complex business logic. However, this example can provide you with an entry-level idea and reference.

The above is the detailed content of Tips for implementing Baidu map search and display in Vue. For more information, please follow other related articles on the PHP Chinese website!