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 相关文章推荐
JS实现为表格动态添加标题的方法
Mar 31 Javascript
js中window.open的参数及注意注意事项
Jul 06 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
Oct 26 Javascript
Node.js使用NodeMailer发送邮件实例代码
Mar 06 Javascript
利用jQuery解析获取JSON数据
Apr 08 jQuery
利用 spin.js 生成等待效果(js 等待效果)
Jun 25 Javascript
Vue.js 2.x之组件的定义和注册图文详解
Jun 19 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
Aug 25 Javascript
用npm-run实现自动化任务的方法示例
Jan 14 Javascript
微信小程序生成二维码的示例代码
Mar 29 Javascript
JavaScript使用prototype属性实现继承操作示例
May 22 Javascript
解决vant title-active-color与title-inactive-color不生效问题
Nov 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
php checkbox复选框值的获取与checkbox默认值输出方法
2010/05/15 PHP
PHP中的str_repeat函数在JavaScript中的实现
2013/09/16 PHP
php实现SAE上使用storage上传与下载文件的方法
2015/06/29 PHP
php结合curl实现多线程抓取
2015/07/09 PHP
PHP读取配置文件类实例(可读取ini,yaml,xml等)
2015/07/28 PHP
php版微信自定义回复功能示例
2016/12/05 PHP
PHP iconv()函数字符编码转换的问题讲解
2019/03/22 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
Laravel实现批量更新多条数据
2020/04/06 PHP
日期处理的js库(迷你版)--自建js库总结
2011/11/21 Javascript
js关闭模态窗口刷新父页面或跳转页面
2012/12/13 Javascript
使用typeof判断function是否存在于上下文
2014/08/14 Javascript
JavaScript iframe数据共享接口实现方法
2016/01/06 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
2017/01/05 Javascript
微信小程序模板和模块化用法实例分析
2017/11/28 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
2020/05/12 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
python文件读写并使用mysql批量插入示例分享(python操作mysql)
2014/02/17 Python
python实现调用其他python脚本的方法
2014/10/05 Python
Python实现抓取城市的PM2.5浓度和排名
2015/03/19 Python
Python3读取UTF-8文件及统计文件行数的方法
2015/05/22 Python
在Django同1个页面中的多表单处理详解
2017/01/25 Python
Python使用剪切板的方法
2017/06/06 Python
python实现redis三种cas事务操作
2017/12/19 Python
Python threading的使用方法解析
2019/08/28 Python
Python3 实现爬取网站下所有URL方式
2020/01/16 Python
施华洛世奇西班牙官网:SWAROVSKI西班牙
2019/06/06 全球购物
CNC数控操作工岗位职责
2013/11/19 职场文书
企业后勤岗位职责
2014/02/28 职场文书
奉献家乡演讲稿
2014/09/13 职场文书
2015年话务员工作总结
2015/04/29 职场文书
毕业实习单位意见
2015/06/04 职场文书
CSS作用域(样式分割)的使用汇总
2021/11/07 HTML / CSS
Python利用FlashText算法实现替换字符串
2022/03/31 Python
什么是clearfix (一文搞清楚css清除浮动clearfix)
2023/05/21 HTML / CSS