admin管理员组文章数量:1567037
1. 申请谷歌地图api的key
注:首先网络是能翻墙 不然啥也看不见
2. 在vue项目中安装vue-google-maps
注:此时的–save是把vue-google-maps写入package.json)
npm install --save vue2-google-maps@0.10.7
安装完成之后,查看package.json是否有vue-google-maps
"vue2-google-maps": "^0.10.7",
3. 在main.js文件中引入
import * as VueGoogleMaps from 'vue2-google-maps'
Vue.config.productionTip = false
Vue.use(VueGoogleMaps, {
load: {
key: '', // 此处填入谷歌地图申请的key
libraries: 'places'
}
})
4.新建谷歌地图弹框GoogleMap.vue
<template>
<el-dialog :visible.sync="dialog" append-to-body title="Dialog Demo">
<div>
<br>
<GmapMap
:center="center"
:zoom="12"
style="width:100%; height: 400px;"
/>
</div>
</el-dialog>
</template>
<script>
// 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
// 例如:import 《组件名称》 from '《组件路径》';
// dialog 打开方式; this.refs.xxx.dialog = true
export default {
// import引入的组件需要注入到对象中才能使用
name: 'GoogleMap',
components: {},
data() {
// 这里存放数据
return {
dialog: false,
formLabelWidth: '120px',
center: { lat: 45.508, lng: -73.587 }
}
},
// 监听属性 类似于data概念
computed: {},
// 生命周期 - 创建完成(可以访问当前this实例)
created() {
},
mounted() {
this.geolocate()
},
// 监控data中的数据变化
// 方法集合
methods: {
geolocate: function() {
navigator.geolocation.getCurrentPosition(position => {
this.center = {
lat: position.coords.latitude,
lng: position.coords.longitude
// lat: 45.508,
// lng: -73.587
}
})
}
}
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>
5.在父组件中引入GoogleMap.vue
<google-map ref="google-map"/>
import GoogleMap from './GoogleMap.vue'
components: {GoogleMap}
更多用法参考官方文档
https://developers.google/maps/documentation/javascript/tutorial?hl=zh-cn
版权声明:本文标题:vue2.0调用谷歌地图vue-google-maps(不采坑系列) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1725992343a1051642.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论