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

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

vue-googlemaps

Integrate Google Maps in your Vue application in a "Vue-way".

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

Live demo

The main objective of the library is to use Google Maps using Vue components in a way that feels natural to Vue developpers (with props, events, slots...).

Sponsors

Gold

Silver

Bronze

Table of Contents

InstallationUsageBuiltin componentsCreate you own componentsQuick Examples

Installation

npm i -S vue-googlemaps

yarn add vue-googlemaps

You need to polyfill some ES2015 features in old browsers.

Usage

You need a Google API key from the developer console.

import 'vue-googlemaps/dist/vue-googlemaps.css'import VueGoogleMaps from 'vue-googlemaps'Vue.use(VueGoogleMaps, { load: { // Google API key apiKey: 'your-google-api-key', // Enable more Google Maps libraries here libraries: ['places'], // Use new renderer useBetaRenderer: false, },})

Builtin components

(Documentation is work-in-progress)

CircleGeocoderMapMarkerNearbyPlacesPlaceDetailsUserPositionMore to come!

Create you own components

Here is an example of what a Marker component would look like:

import { MapElement } from 'vue-googlemaps'// Those Vue props will update automatically// (Two-way binding with .sync modifier)const boundProps = [ 'animation', 'clickable', 'cursor', 'draggable', // ...]// Events from Google Maps emitted as Vue eventsconst redirectedEvents = [ 'click', 'rightclick', 'dblclick', 'drag', // ...]export default { mixins: [ // You need to use this mixin MapElement, ], // When Google Maps is ready googleMapsReady () { const options = Object.assign({}, this.$props) options.map = this.$_map // Create Google Maps objects this.$_marker = new window.google.maps.Marker(options) // Bind the Vue props this.bindProps(this.$_marker, boundProps) // Emit the events from Google Maps this.redirectEvents(this.$_marker, redirectedEvents) }, beforeDestroy () { // Teardown if (this.$_marker) { this.$_marker.setMap(null) } },}

Quick Examples

Map with markers

Place Details

Geocoder

Nearby places

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。