vue qq.maps_将Google Maps集成到您的Vue应用程序中

vue qq.maps

vue-googlemaps (vue-googlemaps)

Integrate Google Maps in your Vue application

将Google Maps集成到您的Vue应用程序中

This library is Work In Progress. More components will be available in the 1.0 release.

该库是“进行中”。 更多组件将在1.0版本中提供。

View demo 查看演示 Download Source 下载源

安装 (Installation)

npm i -S vue-googlemaps

yarn add vue-googlemaps

You need to polyfill some ES2015 features in old browsers.

你需要填充工具在旧的浏览器的一些功能ES2015。

用法 (Usage)

import 'vue-googlemaps/dist/vue-googlemaps.css'
import VueGoogleMaps from 'vue-googlemaps'

Vue.use(VueGoogleMaps, {
  load: {
    apiKey: 'your-google-api-key',
    libraries: ['places'],
  },
})

快速范例 (Quick Examples)

带有标记的地图 (Map with markers)

<googlemaps-map
  :center.sync="center"
  :zoom.sync="zoom"
  :options="mapOptions"
  @idle="onIdle"
  @click="onMapClick">

  <!-- User Position -->
  <googlemaps-user-position
    @update:position="setUserPosition"
  />

  <googlemaps-marker
    v-for="marker of markers"
    :key="marker._id"
    :label="{
      color: marker === currentmarker ? 'white' : 'black',
      fontFamily: 'Material Icons',
      fontSize: '20px',
      text: 'star_rate',
    }"
    :position="marker.position"
    @click="selectMarker(marker._id)"
  />
</googlemaps-map>

地点详情 (Place Details)

<googlemaps-place-details
  :request="{
    placeId: placeId
  }"
  @results="results => ..."
>
  <template scope="props">
    <div class="name">{{ props.results.name }}</div>
    <div class="address">{{ props.results.formatted_address }}</div>
  </template>
</googlemaps-place-details>

地理编码器 (Geocoder)

<googlemaps-geocoder
  :request="{
    location: latLng,
  }"
  @results="results => ..."
>
  <template scope="props">
    <div class="name">{{ props.results[1].name }}</div>
    <div class="address">{{ props.results[0].formatted_address }}</div>
  </template>
</googlemaps-geocoder>

附近的地方 (Nearby places)

<googlemaps-map
  @idle="map => mapBounds = map.getBounds()"
/>

<googlemaps-nearby-places
  :request="{
    bounds: mapBounds	
  }"
  :filter="result => !result.types.includes('locality')"
  @results="results => ..."
>
  <template scope="props">
    <div v-if="props.loading">Loading...</div>

    <div v-for="result of props.result">
      <div>
        <img
          v-if="result.photos"
          :src="result.photos[0].getUrl({ maxWidth: 80, maxHeight: 80 })"
        />
        {{ result.name }}
      </div>
      <div>{{ result.vicinity }}</div>
    </div>
  </template>
</googlemaps-nearby-places>

翻译自: https://vuejsexamples.com/integrate-google-maps-in-your-vue-application/

vue qq.maps