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类和继承 this属性使用说明
Sep 03 Javascript
Javascript判断文件是否存在(客户端/服务器端)
Sep 16 Javascript
jQuery中offsetParent()方法用法实例
Jan 19 Javascript
基于Angularjs实现分页功能
May 30 Javascript
BootStrap中Tab页签切换实例代码
May 30 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
Sep 01 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
Oct 10 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
Dec 08 Javascript
vue修改vue项目运行端口号的方法
Aug 04 Javascript
js判断节假日实例代码
Dec 27 Javascript
Vue实现简单计算器案例
Feb 25 Javascript
如何在node环境实现“get数据解析”代码实例
Jul 03 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
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
用PHP实现的随机广告显示代码
2007/06/14 PHP
PHP两种实现无级递归分类的方法
2017/03/02 PHP
基于Codeigniter框架实现的student信息系统站点动态发布功能详解
2017/03/23 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
javascript 设计模式之单体模式 面向对象学习基础
2010/04/18 Javascript
JavaScript设计模式之建造者模式介绍
2014/12/28 Javascript
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
原生js实现tab选项卡切换
2020/03/23 Javascript
详解js数组的完全随机排列算法
2016/12/16 Javascript
vue 纯js监听滚动条到底部的实例讲解
2018/09/03 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
2019/02/18 Javascript
详解如何运行vue项目
2019/04/15 Javascript
JS实现容器模块左右拖动效果
2020/01/14 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
关于JavaScript数组去重的一些理解汇总
2020/09/10 Javascript
python socket 超时设置 errno 10054
2014/07/01 Python
Python中为feedparser设置超时时间避免堵塞
2014/09/28 Python
python使用PyCharm进行远程开发和调试
2017/11/02 Python
[原创]windows下Anaconda的安装与配置正解(Anaconda入门教程)
2018/04/05 Python
python模拟点击网页按钮实现方法
2020/02/25 Python
Python操作dict时避免出现KeyError的几种解决方法
2020/09/20 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
python给list排序的简单方法
2020/12/10 Python
python opencv实现图像配准与比较
2021/02/09 Python
纯CSS3制作页面切换效果的实例代码
2019/05/30 HTML / CSS
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
英国女性化妆品收纳和家具网站:Beautify
2019/12/07 全球购物
如何开发安全的AJAX应用
2014/03/26 面试题
Java语言的优势
2015/01/10 面试题
yy结婚证婚词
2014/01/10 职场文书
岗位职责风险点
2014/03/12 职场文书
科研课题实施方案
2014/03/18 职场文书
军事博物馆观后感
2015/06/05 职场文书
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
2021/03/30 HTML / CSS
SpringBoot 集成短信和邮件 以阿里云短信服务为例
2022/04/22 Java/Android