基于 vue 2.x 和 google 地图的地图组件
- Install
- npm install -S vue2-googlemap
- Usage
- import Vue from 'vue';
- import vueGooglemap from 'vue2-googlemap';
- Vue.use(vueGooglemap);
- /*
- The api key is required.
- If you want to ignore the browser's language setting, you can set the language parameter.
- Suggest to use the release version. v=3 by default.
- */
- vueGooglemap.initGooglemap({
- key: 'your GOOGLE_MAPS_API_KEY',
- language: 'zh-CN',
- v: '3',
- })
- Components
- Map
- <vue-googlemap :center="center" :zoom="zoom" :controls="controls" :events="events" ></vue-googlemap>
- Marker
- <vue-googlemap-marker :position="position" :icon="icon" :events="events" ></vue-googlemap-marker>
- infoWindow
- <vue-googlemap-infoWindow :position="position" :events="events" @change="change" ></vue-googlemap-infoWindow>
- Circle
- <vue-googlemap-circle :center="center" :radius="radius" :events="events" @change="change" editable ></vue-googlemap-circle>
- Rectangle
- <vue-googlemap-rectangle :bounds="bounds" :events="events" @change="change" editable ></vue-googlemap-rectangle>
- Polyline
- <vue-googlemap-polyline :path="path" :events="events" @change="change" editable ></vue-googlemap-polyline>
- Polygon
- <vue-googlemap-polygon :paths="paths" :events="events" @change="change" editable ></vue-googlemap-polygon>
- License
- This project is covered under the MIT License. Feel free to use it wherever you like.
来源: https://juejin.im/entry/5a9770865188257a6717a6af