ネットワーク全体の（a）の希少性、ホーム地図検索の完全なチェーンを達成

いくつかの時間前、私は会社が家庭の地図検索機能の類似したチェーンを開発する必要がある必要がありますが、私は、関連する記事を達成するために、完全な心房機能を見つけるためにホームリンクマップの市場でも、まだ比較的不足している、または機能はまだ完璧ではないことがわかりましたこのために、私は円が部屋を見つけるためにどこを含むホームマップや必要なのチェーンを共有するためのファンクションルームの完全な実装を、見つけるために、自分自身に考え、どのように全体の地図検索が一つの成分に分割しました。

プロジェクトは、オンラインとなっている〜を体験するためにここにjabbed（PCのみをサポートしています）

開始

1、効果プレビュー

2.準備

• テクノロジー・スタック

VUE家族バケット+ VUE-Baiduのマップ+ BMapLib

前記VUE-Baiduのマップは、サードパーティのライブラリで、直接ラインで、良いパッケージ組立部を有し、BMapLibは、オープンソースのライブラリBaiduのです

• コンポーネントのスプリット

地図容器コンポーネント： <baidu-map></baidu-map>

気泡発生領域アセンブリ（カスタムカバー）： <zoneOverlay></zoneOverlay>

エリア境界コンポーネント： <bm-boundary></bm-boundary>

バブル周囲のハウジングアセンブリ（カスタムカバー）： <aroundOverlay></aroundOverlay>

ハウジングカバーアセンブリ（カスタムカバー）を囲む詳細： <detailOverlay></detailOverlay>

検索エリアは、バブルのコンポーネントを丸で囲みました。 <bm-polygon><bm-polygon>

検索パスコンポーネントをCIRCLE： <bm-polyline></bm-polyline>

部屋のコンポーネントを見つけるためのヒントサークル： <drawToast></drawToast>

リストの合計数は、コンポーネントの周囲のヒント： <dataToast></dataToast>

地図の初期化

まず、私たちがしなければならないここで使用するマップの初期化は、Baiduのマップコンポーネントであり、

<div class="map-wrapper">
    <baidu-map id="bm-view" class="bm-view" :center="center" :zoom="zoom" :scroll-wheel-zoom="true" @ready="handler"></baidu-map>
</div>
复制代码

パラメータ：

センターは、例えば、地図の中心点の座標を示し、{LNG：116.404、緯度：39.915}

ズームマップのズームレベル表現

スクロールホイール、ズームは、オープンホイールのズームかどうかを示します

readyイベントが必要、例えば、中央中央のマップ座標を設定し、又はBMAP、マップタイプ、等を取得完了後地図ローディング動作を示します

handler ({ BMap, map }) {
    // lng, lat 表示你要设置的经纬度
    this.$set(this.center, 'lng', lng)
    this.$set(this.center, 'lat', lat)
    console.log(BMap) // just console.log(BMap)
    console.log(map) // just console.log(map)
}
复制代码

ここで、Iは、中心を設定し、イベントを通過し、現在の地域の緯度と経度を探し、してもらいます

handler ({BMap, map}) {
  this.initGeo()
},
initGeo () {
  connect.$on('cityGeoOk', data => {
    this.$set(this.center, 'lng', data[0])
    this.$set(this.center, 'lat', data[1])
  })
}
复制代码

同じ電話気に入りクロスコンポーネント通信として、あなたは、基地局、（ここで私は、接続という名前の）新しいJSファイルが必要

import Vue from 'vue'

export default new Vue()
复制代码

その後、アセンブリ内で導入することができるconnect.$emit('event', data)イベントを配布して、connect.$on('event', data => {})イベントを待機。

最後に、（自分自身の特定を調整することができ、12は私が設定）と高さマップコンテナBaiduのマップのズームレベルを設定する必要がありそうでない場合は目に見えない効果があります

.bm-view{
    height: 100%; /* for example */
}
复制代码

結果は以下の通りであります：

バブル表示領域

マップが初期化された後、次のステップは、地図上に表示される方法の異なる領域であり、ここでIはBM-オーバーレイコンポーネントを使用し、zoneOverlay成分に対する第二のパッケージ。

<div class="map-wrapper">
    <baidu-map id="bm-view" class="bm-view" :center="center" :zoom="zoom" :scroll-wheel-zoom="true" @ready="handler">
        <div>
            <zone-overlay
              v-for="(item, index) in zoneGeoPoints" :key="index"
              :position="{lng: item.lng, lat: item.lat}"
              :text="item">
            </zone-overlay>
        </div>
    </baidu-map>
</div>
复制代码

zoneGeoPointsは、緯度と経度の領域を含む属性情報を、エリアアレイ、オブジェクトの背景要素から得られたインタフェースを示しています。

// zoneOverlay.vue
<template>
  <bm-overlay
    ref="customOverlay"
    class="zone"
    pane="labelPane"
    @draw="draw">
    <div>
      <p>{{text.name}}</p>
      <p>{{text.houseCnt}}套</p>
    </div>
  </bm-overlay>
</template>

<script>
export default {
  props: ['text', 'position', 'active'],
  watch: {
    position: {
      handler () {
        this.$refs.customOverlay.reload()
      },
      deep: true
    }
  },
  methods: {
    draw ({el, BMap, map}) {
      const {lng, lat} = this.position
      const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))
      el.style.left = pixel.x - 42 + 'px'
      el.style.top = pixel.y - 42 + 'px'
    }
  }
}
</script>

<style lang="stylus" scoped>
  .zone
    transition: background-color .15s ease-in-out
    display: flex
    align-items: center
    width: 84px
    height: 84px
    background-color: rgba(58,126,255,0.9)
    overflow: hidden
    text-overflow: ellipsis
    white-space: nowrap
    color: #fff
    font-size: 12px
    text-align: center
    padding: 10px
    position: absolute
    border-radius: 50%
    box-shadow: 0 0 4px #999
    box-sizing: border-box
    &:hover
      z-index: 1
      background-color: rgba(240,65,52,.9)
      color: #fff
    div
      display: flex
      flex-wrap: wrap
      overflow: hidden
      text-overflow: ellipsis
      white-space: nowrap
      justify-content: space-between
      p
        overflow: hidden
        text-overflow: ellipsis
        white-space: nowrap
        width: 100%
        text-align: center
        line-height: 16px
</style>
复制代码

el.style.left = pixel.x - 42 + 'PX'

el.style.top = pixel.y - 42 + 'PX'

幅と高さが84px CSSであるので、点の座標位置の中心を覆う泡を可能にすることで、次のような効果があります。

インタラクティブエリアバブル

バブルの表示領域の後に、今私たちは彼らのために相互作用点を増やしてみましょう - バブルが強調されたときにそれが回復する時間が抜け出し、バブルの領域にマウスをスライドで、私はマウスオーバーとmouseleave事件を使用開始時に、ゾーンので、動的バインディングクラスを-overlay、私は効果を緩和背景色の泡に変化は認められませんでした、

<zone-overlay
  v-for="(item, index) in zoneGeoPoints" :key="index"
  :position="{lng: item.lng, lat: item.lat}"
  :text="item"
  :class="zoneIndex === index ?'active':''"
  @mouseover.native="selectZone(item, index)"
  @mouseleave.native="cancelZone">
</zone-overlay>
<script>
export default {
    data () {
        return {
            zoneIndex: ''
        }
    },
    methods: {
        selectZone (item, index) {
            this.zoneIndex = index
        },
        cancelZone () {
            this.zoneIndex = ''
        }
    }
}
</script>
复制代码

ネイティブ修飾子は、コンポーネントは、次のような効果があり、一般的なHTMLタグになる、またはマウスオーバーとmouseleaveイベントをトリガしませんようにすることです。

緩和効果を高めるために、私は、誰もが私は時間1sの緩和を設定明確にポイントを見ることができるようにするために、マウスイベントをキャンセルし、ホバー擬似クラスのCSSに切り替えます

// zoneOverlay.vue
.zone
    transition: background-color 1s ease-in-out
    &:hover
      z-index: 1
      background-color: rgba(240,65,52,.9)
      color: #fff
复制代码

結果は以下の通りであります：

いくつかのよりインタラクティブなバー

私たちは、VUE、この値よりも小さい、領域が泡を浮上している一方で、自宅のチェーンのように、プロセスで私たちは現在のズームレベルズームのリアルタイムのマップを取得します、地域の気泡が消え、マップの特定のズームレベルを超える値が欲しいです次のように-baiduマップは、API syncCenterAndZoom、特定の使用を提供してくれます。

<div class="map-wrapper">
    <baidu-map id="bm-view" class="bm-view" :center="center" :zoom="zoom" :scroll-wheel-zoom="true" @ready="handler" @zoomend="syncCenterAndZoom">
        <div v-if="showZone">
            <zone-overlay
              v-for="(item, index) in zoneGeoPoints" :key="index"
              :position="{lng: item.lng, lat: item.lat}"
              :text="item">
            </zone-overlay>
        </div>
    </baidu-map>
</div>
复制代码

// 双向绑定 zoom
// ZOOMBOUNDARY 为常量，表示区域气泡消失或显示的 zoom 临界值
// const ZOOMBOUNDARY = 15
syncCenterAndZoom (e) {
  this.zoom = e.target.getZoom()
  this.showZone = this.zoom < ZOOMBOUNDARY
}
复制代码

結果は以下の通りであります：

表示領域の境界

マウスは、気泡のゾーンに割り当てられている場合、境界領域は、BM-境界成分を使用し、領域の境界が表示され、気泡領域のうち、マウスは、領域の境界が消えたとき、

<bm-boundary v-if="showBoundary" :name="zoneBoundary" :strokeWeight="2" strokeColor="blue" fillColor="skyblue" :fillOpacity="0.4"></bm-boundary>
复制代码

パラメータ：

名前は、例えば、領域（SAR）の名前を表し、黄浦区、上海、北京市朝陽区

strokeWeightフレーム領域は、境界線の幅を表します

strokeColorは、境界色境界領域を表します。

fillcolorの領域の境界が表す色を埋めます

fillOpacityの塗りつぶし色の透明度は、境界領域を表し、

<template>
    <div class="map-wrapper">
        <baidu-map id="bm-view" class="bm-view" :center="center" :zoom="zoom" :scroll-wheel-zoom="true" @ready="handler" @zoomend="syncCenterAndZoom">
            <bm-boundary v-if="showBoundary" :name="zoneBoundary" :strokeWeight="2" strokeColor="blue" fillColor="skyblue" :fillOpacity="0.4"></bm-boundary>
            <div v-if="showZone">
                <zone-overlay
                  v-for="(item, index) in zoneGeoPoints" :key="index"
                  :position="{lng: item.lng, lat: item.lat}"
                  :text="item"
                  @mouseover.native="selectZone(item, index)"
                  @mouseleave.native="cancelZone">
                </zone-overlay>
            </div>
        </baidu-map>
    </div>
</template>

<script>
export default {
    data () {
        return {
            showBoundary: false
        }
    },
    methods: {
        selectZone (item, index) {
          this.zoneBoundary = `${this.posCity}${item.name}` // 行政区名字，只供参考
          this.showBoundary = true
        },
        cancelZone () {
          this.zoneBoundary = ''
          this.showBoundary = false
        }
    }
}
</script>
复制代码

結果は以下の通りであります：

これまでのところ、実装との相互作用に関連する領域は、ほぼ完了しています -

地図検索機能は少し複雑ですので、私はフォローアップゆっくりの一環として、より明確にこの機能を実装する方法をステップバイステップで可能ないくつかの部分に分割されますので、しかし、友人のために待ってください〜

最後に、プロジェクト経験住所を掲載：〜私の経験をjabbed（PCのみをサポートしています）

〜悪い事はスプレーを点灯読んでくれてありがとうを入力してください

ます。https：//juejin.im/post/5cff3992e51d45595319e319で再現