vue を使用して Gaode マップのサンプルを操作する

前書き: 前回のブログで、Amap の導入に成功しました。これは、Amap という以前のアドレス vue でした。

一部の要件により、マップの周辺機能を使用する必要があります。

完全なプロジェクトコードについては、私のgithubをチェックしてください

1. まず、達成される結果を見て、写真に示すように、Lianjiaの周囲を参照してください。

2. 原理分析

1. 前回のブログで触れたAmap APIの紹介ですが、vueはAmapマップを呼び出します。

2. Amap Web サイトの API である地図の周辺プラグインを使用します。

AMap.PlaceSearch  //地点搜索服务插件，提供某一特定地区的位置查询服务

プラグインのさまざまなメソッドの中から searchNearBy メソッドが選択されます。

searchNearBy(keyword:String,center:LngLat,radius:Number,
callback:function(status:String,result:info/SearchResult))

// 根据中心点经纬度、半径以及关键字进行周边查询
radius取值范围：0-50000

3. Build queryメソッド

  searchData: function (callback) {
        let keyWords = ['地铁线路', '大型购物广场', '三甲医院', '学校'] // 自选关键词
        let distance = [1000, 3000, 3000, 3000]
        // …………………………………………………………周边分类…………………………………………………………………………………………………………
        placeSearchOptions = { // 构造地点查询类
          pageSize: 10,
          pageIndex: 1,
          city: '021', // 城市
          map: map,
          visible: false
        }
        AMap.service('AMap.PlaceSearch', function () {
          map.clearMap()  // 清除地图覆盖物
          placeSearch = new AMap.PlaceSearch(placeSearchOptions)
          for (let i = 0; i < keyWords.length; i++) {
            placeSearch.searchNearBy(keyWords[i], [121.44343879031237, 31.207570983863118], distance[i], callback)
          }
        })
        return callback
      },

このメソッドでは、より良い方法があれば、後でマップとプラグインが再ロードされるのを防ぐために、すべてのメーカーが検索されます。方法についての指摘は大歓迎です。

4. メーカーの切り替えイベントをフッター下の各オプションにバインドします。

  /*  注册每项的点击事件,默认显示num0，也就是交通，实际上所有的数据已经请求到了，点击按钮只是用来切换maker */
      clickItem: function (index, buttons) {
        map.clearMap()  // 清除地图覆盖物
        buttons.forEach(function (e, index) {
          e.isActive = false
        })
        buttons[index].isActive = true
        self.listCount = self.num[index].length
        self.listText = self.num[index]
        function onClick (e) {
          console.log(e)
        }
        for (let i = 0; i < self.num[index].length; i++) {
          marker = new AMap.Marker({
//            content: &#39;div&#39;,
            title: &#39;abc&#39;,
            icon: &#39;https://webapi.amap.com/theme/v1.3/markers/n/mark_b&#39; + (i + 1) + &#39;.png&#39;,
            position: [self.num[index][i].location.lng, self.num[index][i].location.lat],
            offset: new AMap.Pixel(-24, 5),
            zIndex: 1,
            map: map,
            clickable: true
          })
          AMap.event.addListener(marker, &#39;click&#39;, onClick)
        }
        return marker
      }

3. 結果表示

注: このプロジェクトでは、デモンストレーション効果を促進するために、個人開発者の Amap 秘密キーが使用されています。ご自身のものに置き換えてください。

完全なプロジェクトコードについては、私の github をチェックしてください

以上がvue を使用して Gaode マップのサンプルを操作するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。