vue接入google map自定义marker教程

需求背景

由于客户需求，原来系统接入的高德地图，他们不接受，需要换成google地图。然后就各种百度，各种Google，却不能实现。----无语，就连google地图官方的api也是一坨S-H-I。所以才出现这篇文章。

google地图官方API

-- 以下是Google官方的marker教程，你要是当真就完蛋了。https://developers.google.cn/maps/documentation/javascript/examples/advanced-markers-accessibility#maps_advanced_markers_accessibility-javascript

效果图

教程描述

本教程是使用的vue2+index直接引入js的方式实现，由于网上没有找到合适的插件，都以失败告终。该教程是用户点击marker的时候，才会请求后台接口，弹出自定义弹窗的内容。适合多地图标点使用。

-- 无法安装
-- 结果失败告终
npm install @googlemaps/js-api-loader-- 无法安装
-- 结果失败告终
npm install vue-google-maps-- 打开梯子工具，可以安装，可以展示地图，不能实现动态marker，也可能是我技术不行
-- 结果失败告终
npm install vue2-google-maps@0.10.7
-- 感兴趣的可以参考下面的文章
https://blog.csdn.net/weixin_51678651/article/details/132237438-- 没有尝试，感兴趣的可以试试
npm install google-maps
-- 感兴趣的可以参考下面的文章
https://juejin.cn/post/6844904045245644808?from=search-suggest-- 不想浪费时间的直接看我的教程

教程开始

1、爬楼梯工具

需要爬楼梯工具，不然啥都白费。

2、免费google map api key

// 下面的key只能用于开发，不然地图上满屏都是For development purposes only水印
key=AIzaSyBzE9xAESye6Kde-3hT-6B90nfwUkcS8Yw

3、index.html

修改public\index.html文件，在title标签的下面增加js

<!DOCTYPE html>
<html><head><meta charset="utf-8"><!-- 在这里增加自己的子目录名称 --><meta base="/aiot/"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="renderer" content="webkit"><meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /><link rel="icon" href="<%= BASE_URL %>logo.ico"><title><%= webpackConfig.name %></title><!-- 在这里引入google map --><script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBzE9xAESye6Kde-3hT-6B90nfwUkcS8Yw&v=weekly" defer></script><!-- 在这里引入google map --><!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]--><style>html,body,#app {height: 100%;margin: 0px;padding: 0px;}.chromeframe {margin: 0.2em 0;background: #ccc;color: #000;padding: 0.2em 0;}#loader-wrapper {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 999999;}#loader {display: block;position: relative;left: 50%;top: 50%;width: 150px;height: 150px;margin: -75px 0 0 -75px;border-radius: 50%;border: 3px solid transparent;border-top-color: #FFF;-webkit-animation: spin 2s linear infinite;-ms-animation: spin 2s linear infinite;-moz-animation: spin 2s linear infinite;-o-animation: spin 2s linear infinite;animation: spin 2s linear infinite;z-index: 1001;}#loader:before {content: "";position: absolute;top: 5px;left: 5px;right: 5px;bottom: 5px;border-radius: 50%;border: 3px solid transparent;border-top-color: #FFF;-webkit-animation: spin 3s linear infinite;-moz-animation: spin 3s linear infinite;-o-animation: spin 3s linear infinite;-ms-animation: spin 3s linear infinite;animation: spin 3s linear infinite;}#loader:after {content: "";position: absolute;top: 15px;left: 15px;right: 15px;bottom: 15px;border-radius: 50%;border: 3px solid transparent;border-top-color: #FFF;-moz-animation: spin 1.5s linear infinite;-o-animation: spin 1.5s linear infinite;-ms-animation: spin 1.5s linear infinite;-webkit-animation: spin 1.5s linear infinite;animation: spin 1.5s linear infinite;}@-webkit-keyframes spin {0% {-webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg);}}@keyframes spin {0% {-webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg);}}#loader-wrapper .loader-section {position: fixed;top: 0;width: 51%;height: 100%;background: #304156;z-index: 1000;-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}#loader-wrapper .loader-section.section-left {left: 0;}#loader-wrapper .loader-section.section-right {right: 0;}.loaded #loader-wrapper .loader-section.section-left {-webkit-transform: translateX(-100%);-ms-transform: translateX(-100%);transform: translateX(-100%);-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);}.loaded #loader-wrapper .loader-section.section-right {-webkit-transform: translateX(100%);-ms-transform: translateX(100%);transform: translateX(100%);-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);}.loaded #loader {opacity: 0;-webkit-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}.loaded #loader-wrapper {visibility: hidden;-webkit-transform: translateY(-100%);-ms-transform: translateY(-100%);transform: translateY(-100%);-webkit-transition: all 0.3s 1s ease-out;transition: all 0.3s 1s ease-out;}.no-js #loader-wrapper {display: none;}.no-js h1 {color: #222222;}#loader-wrapper .load_title {font-family: 'Open Sans';color: #FFF;font-size: 19px;width: 100%;text-align: center;z-index: 9999999999999;position: absolute;top: 60%;opacity: 1;line-height: 30px;}#loader-wrapper .load_title span {font-weight: normal;font-style: italic;font-size: 13px;color: #FFF;opacity: 0.5;}</style></head><body><div id="app"><div id="loader-wrapper"><div id="loader"></div><div id="bgLeft" class="loader-section section-left"></div><div id="bgRight" class="loader-section section-right"></div><!-- <div class="load_title">正在加载系统资源，请耐心等待</div> --></div></div><script>const bgLeft = document.getElementById('bgLeft');const bgRight = document.getElementById('bgRight');let backgroundColor = "#304156";if (window.innerWidth < 1500) {// 移动端backgroundColor = "#91dbcd";}bgLeft.style.backgroundColor = backgroundColor;bgRight.style.backgroundColor = backgroundColor;</script></body>
</html>

4、vue代码

<template><div class="app-container" style="padding-bottom: 0;"><el-row><el-col :span="24"><div id="mapDiv" ref="mapDiv"></div></el-col></el-row></div>
</template><script>
import request from '@/utils/request';export default {name: "IndexGoogleMap",data() {return {map:null,googleCenter: { lat: 24.919900, lng: 121.2140 },googleZoom:5,googleMarkers:[],googleInfoWindow: null,queryParams: {id: 0,name: ""},};},created() {},methods: {initMap() {let _this = this;request({url: '/index/listMap',method: 'get',params: this.queryParams}).then(response => {if(response != null && response.rows != null){_this.map = new window.google.maps.Map(document.getElementById("mapDiv"), {zoom: _this.googleZoom,center: _this.googleCenter,mapTypeControl: false, // 是否显示地图类型切换的按钮 默认 truefullscreenControl:false, // 是否显示全屏显示地图的按钮 默认 truestreetViewControl: false, // 是否显示街景按钮 默认 true});_this.googleInfoWindow = new google.maps.InfoWindow();for (let i = 0; i < response.rows.length; i++) {let pngColorName = "map_pink_26";if(response.rows[i].onlineFlag == 0){pngColorName = "map_gree_26";}let pngColorPath = require("../assets/images/"+pngColorName+".png");var position = new google.maps.LatLng(response.rows[i].latitude, response.rows[i].longitude);let marker = new google.maps.Marker({position: position, // 标记的位置map: _this.map, // 标记所在的地图icon: pngColorPath, // 标记的icon});let id = response.rows[i].id;google.maps.event.addListener(marker, 'click', function(evt) {request({url: '/index/getIndexDeviceInfoByOne?id='+id,method: 'get'}).then(response => {if(response != null && response.data != null){if(_this.googleInfoWindow != null){_this.googleInfoWindow.close();}let onlineStatus = "离线";if(response.data.online == 0){onlineStatus = "在线";}let deviceStatus = "故障";if(response.data.devStatus == 0){deviceStatus = "正常";}let deviceContent = "<div class=\"map_div_css\">";deviceContent += "<div style=\"border-bottom:1px solid #ffffff; margin-bottom: 5px;\">设备信息</div>";deviceContent += "<div>所属公司："+response.data.companyName+"</div>";deviceContent += "<div>设备标识："+response.data.devId+"</div>";deviceContent += "<div>设备名称："+response.data.name+"</div>";deviceContent += "<div>在线状态："+onlineStatus+"</div>";deviceContent += "<div>设备状态："+deviceStatus+"</div>";deviceContent += "</div>";_this.googleInfoWindow.setContent(deviceContent);_this.googleInfoWindow.open(_this.map, marker);}});});}}});},},mounted() {this.initMap();},
};</script><style scoped lang="scss">#mapDiv {padding: 0px;margin: 0px;width: 100%;height: 48vh;}::v-deep .map_div_css{background: #304156;padding: 7px;font-size: 14px;color: #ffffff;border-radius: 6px;font-family: initial;}::v-deep .gm-style .gm-style-iw-c{background-color: #304156;padding: 0px;box-shadow: 0;border: 1px solid #46515f;}::v-deep .gm-style .gm-style-iw-tc::after{background: #304156;}::v-deep .gm-ui-hover-effect {opacity: 1;width: 38px !important;height: 38px !important;}::v-deep .gm-ui-hover-effect span{margin: 0px 0px 0px 3px !important;background-color: #fff;}::v-deep .gm-style-iw-d{overflow: hidden !important;}::v-deep .gm-style-iw-ch{padding-top: 0px;}</style>

结束

-----华丽的分割线，以下是凑字数，大家不用花时间看，快去改代码-----

package cn.renkai721.bean.vo;import lombok.extern.slf4j.Slf4j;@Slf4j
public class MakeUpTheWordCount {private String make_up_the_word_count_column_999999999_1;private String make_up_the_word_count_column_999999999_2;private String make_up_the_word_count_column_999999999_3;private String make_up_the_word_count_column_999999999_4;private String make_up_the_word_count_column_999999999_5;private String make_up_the_word_count_column_999999999_6;private String make_up_the_word_count_column_999999999_7;private String make_up_the_word_count_column_999999999_8;private String make_up_the_word_count_column_999999999_9;private String make_up_the_word_count_column_999999999_10;private String make_up_the_word_count_column_999999999_11;private String make_up_the_word_count_column_999999999_12;private String make_up_the_word_count_column_999999999_13;private String make_up_the_word_count_column_999999999_14;private String make_up_the_word_count_column_999999999_15;private String make_up_the_word_count_column_999999999_16;private String make_up_the_word_count_column_999999999_17;private String make_up_the_word_count_column_999999999_18;private String make_up_the_word_count_column_999999999_19;private String make_up_the_word_count_column_999999999_20;public String getMake_up_the_word_count_column_999999999_1() {return make_up_the_word_count_column_999999999_1;}public void setMake_up_the_word_count_column_999999999_1(String make_up_the_word_count_column_999999999_1) {this.make_up_the_word_count_column_999999999_1 = make_up_the_word_count_column_999999999_1;}public String getMake_up_the_word_count_column_999999999_2() {return make_up_the_word_count_column_999999999_2;}public void setMake_up_the_word_count_column_999999999_2(String make_up_the_word_count_column_999999999_2) {this.make_up_the_word_count_column_999999999_2 = make_up_the_word_count_column_999999999_2;}public String getMake_up_the_word_count_column_999999999_3() {return make_up_the_word_count_column_999999999_3;}public void setMake_up_the_word_count_column_999999999_3(String make_up_the_word_count_column_999999999_3) {this.make_up_the_word_count_column_999999999_3 = make_up_the_word_count_column_999999999_3;}public String getMake_up_the_word_count_column_999999999_4() {return make_up_the_word_count_column_999999999_4;}public void setMake_up_the_word_count_column_999999999_4(String make_up_the_word_count_column_999999999_4) {this.make_up_the_word_count_column_999999999_4 = make_up_the_word_count_column_999999999_4;}public String getMake_up_the_word_count_column_999999999_5() {return make_up_the_word_count_column_999999999_5;}public void setMake_up_the_word_count_column_999999999_5(String make_up_the_word_count_column_999999999_5) {this.make_up_the_word_count_column_999999999_5 = make_up_the_word_count_column_999999999_5;}public String getMake_up_the_word_count_column_999999999_6() {return make_up_the_word_count_column_999999999_6;}public void setMake_up_the_word_count_column_999999999_6(String make_up_the_word_count_column_999999999_6) {this.make_up_the_word_count_column_999999999_6 = make_up_the_word_count_column_999999999_6;}public String getMake_up_the_word_count_column_999999999_7() {return make_up_the_word_count_column_999999999_7;}public void setMake_up_the_word_count_column_999999999_7(String make_up_the_word_count_column_999999999_7) {this.make_up_the_word_count_column_999999999_7 = make_up_the_word_count_column_999999999_7;}public String getMake_up_the_word_count_column_999999999_8() {return make_up_the_word_count_column_999999999_8;}public void setMake_up_the_word_count_column_999999999_8(String make_up_the_word_count_column_999999999_8) {this.make_up_the_word_count_column_999999999_8 = make_up_the_word_count_column_999999999_8;}public String getMake_up_the_word_count_column_999999999_9() {return make_up_the_word_count_column_999999999_9;}public void setMake_up_the_word_count_column_999999999_9(String make_up_the_word_count_column_999999999_9) {this.make_up_the_word_count_column_999999999_9 = make_up_the_word_count_column_999999999_9;}public String getMake_up_the_word_count_column_999999999_10() {return make_up_the_word_count_column_999999999_10;}public void setMake_up_the_word_count_column_999999999_10(String make_up_the_word_count_column_999999999_10) {this.make_up_the_word_count_column_999999999_10 = make_up_the_word_count_column_999999999_10;}public String getMake_up_the_word_count_column_999999999_11() {return make_up_the_word_count_column_999999999_11;}public void setMake_up_the_word_count_column_999999999_11(String make_up_the_word_count_column_999999999_11) {this.make_up_the_word_count_column_999999999_11 = make_up_the_word_count_column_999999999_11;}public String getMake_up_the_word_count_column_999999999_12() {return make_up_the_word_count_column_999999999_12;}public void setMake_up_the_word_count_column_999999999_12(String make_up_the_word_count_column_999999999_12) {this.make_up_the_word_count_column_999999999_12 = make_up_the_word_count_column_999999999_12;}public String getMake_up_the_word_count_column_999999999_13() {return make_up_the_word_count_column_999999999_13;}public void setMake_up_the_word_count_column_999999999_13(String make_up_the_word_count_column_999999999_13) {this.make_up_the_word_count_column_999999999_13 = make_up_the_word_count_column_999999999_13;}public String getMake_up_the_word_count_column_999999999_14() {return make_up_the_word_count_column_999999999_14;}public void setMake_up_the_word_count_column_999999999_14(String make_up_the_word_count_column_999999999_14) {this.make_up_the_word_count_column_999999999_14 = make_up_the_word_count_column_999999999_14;}public String getMake_up_the_word_count_column_999999999_15() {return make_up_the_word_count_column_999999999_15;}public void setMake_up_the_word_count_column_999999999_15(String make_up_the_word_count_column_999999999_15) {this.make_up_the_word_count_column_999999999_15 = make_up_the_word_count_column_999999999_15;}public String getMake_up_the_word_count_column_999999999_16() {return make_up_the_word_count_column_999999999_16;}public void setMake_up_the_word_count_column_999999999_16(String make_up_the_word_count_column_999999999_16) {this.make_up_the_word_count_column_999999999_16 = make_up_the_word_count_column_999999999_16;}public String getMake_up_the_word_count_column_999999999_17() {return make_up_the_word_count_column_999999999_17;}public void setMake_up_the_word_count_column_999999999_17(String make_up_the_word_count_column_999999999_17) {this.make_up_the_word_count_column_999999999_17 = make_up_the_word_count_column_999999999_17;}public String getMake_up_the_word_count_column_999999999_18() {return make_up_the_word_count_column_999999999_18;}public void setMake_up_the_word_count_column_999999999_18(String make_up_the_word_count_column_999999999_18) {this.make_up_the_word_count_column_999999999_18 = make_up_the_word_count_column_999999999_18;}public String getMake_up_the_word_count_column_999999999_19() {return make_up_the_word_count_column_999999999_19;}public void setMake_up_the_word_count_column_999999999_19(String make_up_the_word_count_column_999999999_19) {this.make_up_the_word_count_column_999999999_19 = make_up_the_word_count_column_999999999_19;}public String getMake_up_the_word_count_column_999999999_20() {return make_up_the_word_count_column_999999999_20;}public void setMake_up_the_word_count_column_999999999_20(String make_up_the_word_count_column_999999999_20) {this.make_up_the_word_count_column_999999999_20 = make_up_the_word_count_column_999999999_20;}
}