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 相关文章推荐
Sample script that deletes a SQL Server database
Jun 16 Javascript
syntaxhighlighter 使用方法
Jul 02 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
Jan 03 Javascript
分享Javascript中最常用的55个经典小技巧
Nov 29 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
Apr 10 Javascript
js判断元素是否隐藏的方法
Jun 09 Javascript
JS实现的网页背景闪电闪烁效果代码
Oct 17 Javascript
js中对函数设置默认参数值的3种方法
Oct 23 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
Jan 21 Javascript
vue使用vue-cli快速创建工程
Jul 28 Javascript
angularjs select 赋值 ng-options配置方法
Feb 28 Javascript
Vue基本指令实例图文讲解
Feb 25 Vue.js
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 xfocus防注入资料
2008/04/27 PHP
php zlib压缩和解压缩swf文件的代码
2008/12/30 PHP
简单的方法让你的后台登录更加安全(php中加session验证)
2012/08/22 PHP
javascript add event remove event
2008/04/07 Javascript
juqery 学习之五 文档处理 包裹、替换、删除、复制
2011/02/11 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
2011/03/10 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
JS定义网页表单提交(submit)的方法
2015/03/20 Javascript
JavaScript中DOM详解
2015/04/13 Javascript
JavaScript 七大技巧(二)
2015/12/13 Javascript
深入理解vue Render函数
2017/07/19 Javascript
bootstrap switch开关组件使用方法详解
2017/08/22 Javascript
vue2.0 computed 计算list循环后累加值的实例
2018/03/07 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
[00:34]DOTA2上海特级锦标赛 Spirit战队宣传片
2016/03/04 DOTA
python备份文件的脚本
2008/08/11 Python
Python struct模块解析
2014/06/12 Python
在Python操作时间和日期之asctime()方法的使用
2015/05/22 Python
python 读取DICOM头文件的实例
2018/05/07 Python
Python 修改列表中的元素方法
2018/06/26 Python
selenium+PhantomJS爬取豆瓣读书
2019/08/26 Python
Python socket模块方法实现详解
2019/11/05 Python
基于Tensorflow高阶读写教程
2020/02/10 Python
通过代码实例了解Python sys模块
2020/09/14 Python
python IP地址转整数
2020/11/20 Python
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
澳大利亚新奇小玩意网站:Yellow Octopus
2017/12/28 全球购物
客户代表实习人员自我鉴定
2013/09/27 职场文书
人事专员岗位职责
2013/11/20 职场文书
如何写一封打动人心的求职信
2014/02/17 职场文书
领导批评与自我批评范文
2014/10/16 职场文书
政风行风评议心得体会
2014/10/21 职场文书
MySQL中distinct与group by之间的性能进行比较
2021/05/26 MySQL
POST提交数据常见的四种方式
2022/01/18 HTML / CSS
星际争霸 Light vs Action 一场把教主看到鬼畜的比赛
2022/04/01 星际争霸