vue使用Google地图的实现示例代码


Posted in Javascript onDecember 19, 2018

最近用Vue开发后台系统时,有些数据需要在地图上标注出来,需要用到地图功能,因为是国际项目,国内的地图不太适用,所以选用了Google地图,谷歌地图API: https://developers.google.cn/maps/documentation/javascript/tutorial 。

一、必须的开发要求

1.获取密钥API Key

首先,要使用Google Maps JavaScript API,必须获取一个可用的API密钥,并且必须启用结算,具体获取步骤可百度查询,在此就不一一叙述了,主要想讲的地图用法。

2.海外服务器IP

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

vue使用Google地图的实现示例代码

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

二、引入谷歌插件

使用npm进行引入:

npm install vue-google-maps
//mian.js中:
import 'vue-googlemaps/dist/vue-googlemaps.css'
import VueGoogleMaps from 'vue-googlemaps'
Vue.use(VueGoogleMaps, {
 load: {
//填入申请的apiKey账号
  apiKey: '',
  libraries: ['places'],
  useBetaRenderer: false,
 },
})

三、使用谷歌插件

1.使用方法

//创建dom
<div id="allmap" ref="allmap"></div>
  //创建谷歌地图
   this.maps = new google.maps.Map(document.getElementById("allmap"), {
    //显示一个滑动条来控制map的Zoom级别
    zoom: 13,
    //设置地图中心点
    center: { lat: mapData[0].latitude, lng: mapData[0].longitude },
    //为了关闭默认控件集,设置地图的disableDefaultUI的属性为true
    disableDefaultUI: true,
   // 通过单击缩放控件来缩放地图
    gestureHandling: 'cooperative',  
   // 删除地图上的“ 缩放”控件按钮。
    zoomControl: false,
   // 控制地图的类型 roadmap 地图 terrain 地图地形 
   satellite 卫星图像 hybrid 卫星图像+地名
    mapTypeId: 'satellite',      
    //语言可选值:en,zh_en, zh_cn
    language: zh_en  
  
   // 添加标记 (红色的标点)
   let marker = new google.maps.Marker({
    //标点的位置
    position: { lat: 22.5397965915, lng: 114.0611121534 },
    map: this.maps,
   //标点的名称
    title: "中华人民共和国",
   //标点中的文字
    label: "SZ",
   //标点的动画
    animation: google.maps.Animation.DROP
    });
    // 创建消息窗口DOM,将内容包装在HTML DIV中,以便设置InfoWindow的高度和宽度。
   let contentString =
    '<div class="content"><h3>地图</h3><p>测试数据</p></div>';
   //地图的消息窗口:InfoWindow
   let infowindow = new google.maps.InfoWindow({
    content: contentString
   });
   // 点击标点事件
   marker.addListener("click", function() {
    infowindow.open(this.maps, marker);
   });

示例图片:

vue使用Google地图的实现示例代码

2.结合项目

//mapPAge.vue
<template>
 <div class="container">
  <div id="allmap" ref="allmap"></div>
 </div>
</template>
<script>
export default {
  mounted(){
  //在mounted中执行地图方法,mapData为要展示的数据
  this.initMap(mapData);
}
  methods:{
  initMap(mapData) {
   let that = this;
   // 创建google地图
    this.maps = new google.maps.Map(document.getElementById("allmap"), {
    zoom: 13,
    //地图中心点,这里我以第一个数据的经纬度来设置中心点
    center: { lat: mapData[0].latitude, lng: mapData[0].longitude },
    disableDefaultUI: false,
    zoomControl: false   
   });  
   // 设置满足条件的自定义标记图标
   let imageblue = "@/img/map_blue.png";
   let imagered = "@/img/map_red.png";
   let imagegray = "@/img/map_gray.png";
   let infoWindow = new google.maps.InfoWindow();
   // 循环渲染数据
   mapData.map(currData=>{
    // 判断当前图片
    let currImg = "";
    if (currData.line == 0) {
     currImg = imagegray;
    } else {
     if (currData.available >= 4) {
      currImg = imageblue;
     } else {
      currImg = imagered;
     }
    }
    let marker = new google.maps.Marker({
     position: { lat: currData.latitude, lng: currData.longitude },
     map: this.maps,
     title: currData.name,
     // 此处的icon为标记的自定义图标
     icon: currImg,
     animation: google.maps.Animation.DROP
    });
    
     //多个标记点的点击事件
    (function(marker, currData) {
     google.maps.event.addListener(marker, "click", function(e) {
      let currLine =
       currData.line == 1? '在线': '离线';
      //设置消息窗口的统一内容
      infoWindow.setContent(
       '<div class="content"><h3 style="margin-bottom:5px;font-size:20px;">' +
        currData.name +
        '</h3><p style="margin-bottom:5px;font-size:16px;">' +
        currData.address +
        '</p></h3><p style="display: flex;align-items:center;margin-bottom:5px;"><span style="display:inline-block;width:12px;height:12px;border-radius:50%;background:#4ECC77;"></span><span style="margin-left:5px;color:#4ECC77;">可用电池 ' +
        +currData.available +
        '<span style="display:inline-block;width:12px;height:12px;border-radius:50%;background:#FF485C;margin-left:25px;"></span><span style="margin-left:5px;color:#FF485C;">空仓 ' +
        +currData.empty +
        '</span></p><p style="color:#333;margin-top:5px;">机柜状态:<span style="color:#000;">' +currLine+
        '</span></p><p style="color:#333;margin-top:5px;">地理位置:<span style="color:#000;">lat:' +
        currData.latitude +
        ";log:" +
        currData.longitude +
        "</span></p></div>"
      );
      //调用 infoWindow.open
      infoWindow.open(this.maps, marker);
     });
    })(marker, currData);
     })
    }
  }
 }

示例图片:

vue使用Google地图的实现示例代码

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

Javascript 相关文章推荐
javascript面向对象包装类Class封装类库剖析
Jan 24 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
Dec 17 Javascript
JS打字效果的动态菜单代码分享
Aug 21 Javascript
详解JavaScript正则表达式之RegExp对象
Dec 13 Javascript
jquery Deferred 快速解决异步回调的问题
Apr 05 Javascript
jQuery实现点击水纹波动动画
Apr 10 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
Nov 25 Javascript
JavaScript仿支付宝6位数字密码输入框
Dec 29 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
Jun 15 Javascript
一次记住JavaScript的6个正则表达式方法
Feb 22 Javascript
微信小程序实现的日期午别医生排班表功能示例
Jan 09 Javascript
Vue项目路由刷新的实现代码
Apr 17 Javascript
JS实现获取自定义属性data值的方法示例
Dec 19 #Javascript
vue动态绑定class选中当前列表变色的方法示例
Dec 19 #Javascript
js指定日期增加指定月份的实现方法
Dec 19 #Javascript
动态内存分配导致影响Javascript性能的问题
Dec 18 #Javascript
关于node-bindings无法在Electron中使用的解决办法
Dec 18 #Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
Dec 18 #Javascript
JS监听滚动和id自动定位滚动
Dec 18 #Javascript
You might like
php mssql 时间格式问题
2009/01/13 PHP
PHP PDOStatement::closeCursor讲解
2019/01/30 PHP
textarea的value是html文件源代码,存成html文件的代码
2007/04/20 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
2013/04/22 Javascript
jQuery提交多个表单的小例子
2013/06/30 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
2017/02/18 Javascript
VUE使用vuex解决模块间传值问题的方法
2017/06/01 Javascript
MvcPager分页控件 适用于Bootstrap
2017/06/03 Javascript
jQuery无冲突模式详解
2019/01/17 jQuery
vue中实现Monaco Editor自定义提示功能
2019/07/05 Javascript
Vue.js的模板语法详解
2020/02/16 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
JS寄快递地址智能解析的实现代码
2020/07/16 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
2021/01/03 Vue.js
[04:54]DOTA2-DPC中国联赛1月31日Recap集锦
2021/03/11 DOTA
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
Django实现快速分页的方法实例
2017/10/22 Python
python实现写数字文件名的递增保存文件方法
2018/10/25 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
Python中的Socket 与 ScoketServer 通信及遇到问题解决方法
2019/04/01 Python
python五子棋游戏的设计与实现
2019/06/18 Python
python爬虫爬取笔趣网小说网站过程图解
2019/11/18 Python
python3实现用turtle模块画一棵随机樱花树
2019/11/21 Python
给 TensorFlow 变量进行赋值的方式
2020/02/10 Python
keras model.fit 解决validation_spilt=num 的问题
2020/06/19 Python
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
ASP.NET中的身份验证有那些
2012/07/13 面试题
综合素质的自我鉴定
2013/10/07 职场文书
测量工程专业求职信
2014/02/24 职场文书
岗位职责怎么写
2014/03/14 职场文书
标准单位租车协议书
2014/09/23 职场文书
检讨书范文300字
2015/01/28 职场文书
海上钢琴师的观后感
2015/06/11 职场文书
赤壁观后感(2)
2015/06/15 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
2016元旦主持人开场白
2015/12/03 职场文书