Vue で Baidu 地図の検索と表示を実装するためのヒント-Vue.js-php.cn

Vue で Baidu 地図の検索と表示を実装するためのヒント

WBOY

リリース： 2023-06-25 11:21:06

オリジナル

1843 人が閲覧しました

インターネット時代の到来により、地図アプリケーションは日常生活に欠かせないツールになりました。 Baidu Map は人気のある地図アプリケーションであり、Vue で Baidu Map の検索と表示を実装することは、多くのフロントエンド開発者にとって非常に実践的なスキルです。この記事では、Baidu の地図検索と表示テクニックを Vue で実装する方法を紹介します。

Baidu Map API の登録

まず、Baidu Map Open Platform にアカウントを登録してアプリケーションを作成し、AK (アクセスキー) を取得する必要があります。

Baidu Map JavaScript API をプロジェクトのindex.html に導入し、AK を独自の AK に置き換えます:

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

ログイン後にコピー

Baidu Map Search の実装

実装百度地図検索では百度地図が提供する API を使用する必要があり、まずページ上に検索ボックスと検索ボタンを含むフォームを作成する必要があります。

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

ログイン後にコピー

次に、Vue コンポーネントで searchText メソッドと onSearch メソッドを定義します。

<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>

ログイン後にコピー

onSearch メソッドでは、BMap.LocalSearch インスタンスを使用して、地図上に検索結果をレンダリングします。

Baidu 地図表示の実装

Vue コンポーネントに div コンテナを作成して地図を表示します:

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

ログイン後にコピー

Vue の作成したフック関数内コンポーネント、マップインスタンスを作成し、中心点とズームレベルを設定します。

<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>

ログイン後にコピー

上記のコードでは、マップインスタンスを作成し、それを Vue コンポーネントのマップ変数に割り当てます。中心点とズームレベルを設定することで、地図の初期位置と表示サイズを制御できます。

完全なコード

最後に、検索コードと表示コードを組み合わせて、完全な Baidu 地図コンポーネントを取得します。

<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>

ログイン後にコピー

上記の手順を実行します。 , Vue で Baidu の地図検索と表示を簡単に実装できます。もちろん、これは単純な例にすぎず、実際のプロジェクトにはさらに多くの機能や複雑なビジネスロジックが含まれる場合があります。ただし、この例は入門レベルのアイデアとリファレンスを提供します。

以上がVue で Baidu 地図の検索と表示を実装するためのヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。