使用谷歌地图的vue示例代码

最近用Vue开发后台系统，有些数据需要标注在地图上，需要地图功能。因为是国际项目，国内地图不适合，所以选择谷歌地图。Google Maps API:https://developers . Google.cn/Maps/documentation/JavaScript/教程。

一、必要的发展要求

1.获取关键应用编程接口密钥

首先，要使用谷歌地图JavaScript API，必须获得可用的API密钥，并且必须启用结算。具体收购步骤可以百度查询。这里，我们就不一一描述地图的用法了。

2.海外服务器IP

如果你想用谷歌地图，你需要翻墙。公司购买发条云的账号，下载发条云安装在浏览器上，然后输入用户账号和密码登录，然后就可以选择服务器进行操作了。

海外模式的网速比较慢，一般我开发的时候都会打开谷歌地图。

二、谷歌插件的引入

使用npm的介绍：

在NPM install vue-Google-maps//mian . js:import ' vue-Google maps/dist/vue-Google maps . CSS ' import vue Google maps从' vue-Google maps ' vue . use(vue Google maps，{load: {//填写应用的apiKey账号apikey: ' '，libraries : ['places']，usebetanderer : false，}，})第三，使用Google插件。

1.如何使用它

//创建DOM div id=' all map ' ref=' all map '/div//创建谷歌地图this . maps=new Google . maps . map(document . getelementbyid(' all map ')，{//显示一个滑动条来控制地图的缩放级别。变焦： 13。//设置地图的中心点。中心： {LAT : MAPDATA [0]。纬度，LNG : MAPDATA [0]。经度}。//若要关闭默认控件集，请将映射的disableDefaultUI属性设置为true disabledefaultui:true。//单击缩放控件缩放地图手势处理3360 '合作'。//删除地图上的“缩放”控制按钮。ZoomControl: false，//控制地图路线图的类型地图地形图地形卫星影像混合卫星影像地名mapTypeId: '卫星'，//语言可选值：en，zh_en，Zh_cn language: zh_en //添加标记(红色标点符号)让marker=new Google . maps . marker({//标点符号位置： { LAT : 22 . 33:1464地图，//标点名称标题： '中华人民共和国'，//标点文字标签: 'SZ '，//标点动画动画3360 Google . maps . animation . drop })；//创建消息窗口DOM，用HTML DIV包装内容，从而设置InfoWindow的高度和宽度。让content string=' div class=' content ' h3map/h3p测试数据/p/div '；//地图的消息窗口：info window let info window=new Google . maps . info window({ content : content string })；//单击标点事件标记. addlistener ('click '，function(){ info window . open(this . maps，marker)；});示例图片：

2.组合项目

//MapPage。vuetemplate div class=' container ' div id=' all map ' ref=' all map '/div/div/template script导出默认{ mounted(){//在安装好的中执行地图方法，地图数据为要展示的数据这个。initmap(地图数据)；}方法： { init Map(Map DATa){ let that=this；//创建谷歌地图这个。地图=新谷歌。地图。地图(文档。getelementbyid(' all map ')，{ zoom: 13，//地图中心点，这里我以第一个数据的经纬度来设置中心点中心： { lat : }地图数据[0].纬度，lng: mapData[0]。经度}，disableDefaultUI: false，zoomcontrol : false })；//设置满足条件的自定义标记图标让图像蓝色=' @/img/map _ blue。png '；让图像变红=' @/img/map _ red。png '；让图像灰度=' @/img/map _ gray。png '；让infoWindow=新谷歌。地图。infoWindow()；//循环渲染数据mapData.map(currData={ //判断当前图片让currImg=if(curr数据。line==0){ Currimg=图像灰度；} else { if(curr)数据。可用=4){ Currimg=图像蓝色；} else { currImg=imagered} }让marker=新谷歌。地图。标记({位置： { lat : curr数据。纬度，lng: currData。经度}，map: this.maps，title: currData.name，//此处的图标为标记的自定义图标icon: currImg，动漫：谷歌。地图。动画。drop })；//多个标记点的点击事件（函数（标记，curr data){ Google。地图。事件。addlistener(标记，'点击'，函数(e) {让currLine=currData.line==1？'在线': '离线；//设置消息窗口的统一内容信息窗口。setcontent(' div class=' content ' H3风格=' margin-bottom :5 px；'font-size :20 pxcurr DATa。name '/h3p style=' margin-bottom :5 px；'font-size :16 pxcurr DATa。address '/p/h3p style=' display : flex；对齐-项目：居中；边距-底部：5像素；span style=' display : in-block；宽度：12 px高度：12px边界半径：50%;背景# 4ecc 77/span span style=' margin-left :5 px；color: # 4ECC77 '可用电池curr DATa。可用的“span style=”显示：内嵌块；宽度：12 px高度：12px边界半径：50%;背景# FF485C边距-左侧：25 px/span span style='边距-左：5 px颜色： # FF485C '空仓curr DATa。'空'/span/PP style=' color : # 333；'页边距-顶部：5 px'机柜状态：span style=' color : # 000 ' curr line/span/PP style=' color : # 333；'页边距-顶部：5 px'地理位置：span style=' color : # 000 ' lat:' curr data。纬度'；日志：“currData”。经度/span/p/div ')；//调用info WiNDOW。打开信息窗口。打开这个。地图、标记)；});})(标记，curr数据)；}) } } }示例图片：

以上使用的是谷歌地图的基本内容，有兴趣的小伙伴儿可以查看谷歌官方文档，查看更多内容，使用更多功能O(_)O。希望对大家的学习有所帮助，也希望大家多多支持我们。