vue2.0调用谷歌地图vue-google-maps（不采坑系列）

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: '', // 此处填入谷歌地图申请的keylibraries: '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 = trueexport 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}

vue2.0调用谷歌地图vue-google-maps（不采坑系列）相关推荐

谷歌地图（Google Maps）
插件介绍: 谷歌地图™测量距离工具,可以自由选择路线.纬度经度工具提示,新加地图截图功能,保存地图图片.整合了wikipedia服务显示地点详细介绍,选择文字快速搜索地点,地址.并加有绝对全屏查看地图 ...
谷歌地图接口Google Maps APIs中地图样式设计配置调整与JSON或URL导出
本文介绍在谷歌地图API(Google Maps APIs)中,设计地图样式并将设计好的样式通过JSON或URL导出的方法. 首先,进入Google Maps APIs网站:https://m ...
vue中如何调用ios摄像头_如何使用Vue2.0调用摄像头进行拍照
这次给大家带来如何使用Vue2.0调用摄像头进行拍照,使用Vue2.0调用摄像头进行拍照的注意事项有哪些,下面就是实战案例,一起来看一下. import {Exif} from './exif.js' ...
uni-app web-view调用谷歌地图
由于公司的业务主要是非洲的,所以做地图功能的时候就需要用到一款国际地图,高德直接不支持,百度的在uni-app上配置了没效果,苹果地图也找过,但是在indentifiers下面没有找到map IDS选 ...
python调用谷歌地图_使用Python调用谷歌地图并记录运动轨迹进行可视化
本篇博文主要介绍了如何使用python来调用谷歌地图,并对北京的一个轨迹数据集进行可视化展示.该数据集包含在3年内收集的182个用户的GPS轨迹.我在这个演示中使用了用户001的数据. 博文会给出具体 ...
调用百度地图地址下拉搜索栏爬坑
调用百度地图地址下拉搜索栏爬坑问题描述在项目编写的过程中,我将调用百度API的部分封装成了一个组件,以便后续的调用.在组件的各项显示中,都能顺利显示,并且调用.但,我将组件调用后,发现,搜索提示栏 ...
利用 Google API 调用谷歌地图演示1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
VUE2.0实现高德地图选择地点后进行行政区边界划分
最终效果图: 最终效果达到选择全部就描绘当前级联选择框下面的所有行政区,第二级开始描绘上一层加当前所有行政区预备知识: vue2.0.组件间传值.高德地图API(提前去高德地图提供的服务处申请好ke ...
html5 调用谷歌地图定位,使用html5地理定位的网页不如谷歌地图准确?
使用笔记本电脑上的浏览器Chrome,我打开了一个本地html网页以获取当前位置.返回的位置(1.3238272103.8606336)与我的实际位置不接近.相似性,网站 [1] (1.3238272 ...
ASP.NET调用V3版本的Google Maps API
英文原文:Google Maps API V3 for ASP.NET 译文出处:青藤园译文作者:王国峰译文链接:ASP.NET中使用Google Maps API V3[译] 简介 Google ...

vue2.0调用谷歌地图vue-google-maps（不采坑系列）

1. 申请谷歌地图api的key

2. 在vue项目中安装vue-google-maps

安装完成之后，查看package.json是否有vue-google-maps

3. 在main.js文件中引入

4.新建谷歌地图弹框GoogleMap.vue

5.在父组件中引入GoogleMap.vue

更多用法参考官方文档

vue2.0调用谷歌地图vue-google-maps（不采坑系列）相关推荐

最新文章

热门文章

vue2.0调用谷歌地图vue-google-maps（不采坑系列）

1. 申请谷歌地图api的key

2. 在vue项目中安装vue-google-maps

安装完成之后，查看package.json是否有vue-google-maps​​

3. 在main.js文件中引入

4.新建谷歌地图弹框GoogleMap.vue

5.在父组件中引入GoogleMap.vue

更多用法参考官方文档

vue2.0调用谷歌地图vue-google-maps（不采坑系列）相关推荐

最新文章

热门文章

安装完成之后，查看package.json是否有vue-google-maps