前言

提示：在vue项目中使用google地图：

因为项目原因，不得不使用google地图。
现目前国内大部分的文章都是几年前写的，有的现目前也用不了，所以结合国内外的一些文章，自己摸索出了一些使用方法。

前期准备

科学上网工具
google开发者账号（需要信用卡）

提示：以下是本篇文章正文内容，下面案例可供参考

一、获取google地图的key

在google开发者后台，创建新项目，选择项目，出现以下
选择已启用的API和服务，启用javascript API
然后，选择凭据，在里面创建新的凭据，这里就是开发所需要的key

创建好的key

二、使用步骤

1.安装google官方依赖

这个比vue2-google-map或者其他的好用

npm install @googlemaps/js-api-loader

2.使用googlemap

代码如下：

 <div id="mapBox"></div>

import { Loader } from "@googlemaps/js-api-loader"; //引入
const loader = new Loader({apiKey: "**************",//之前的keyversion: "weekly",//版本libraries: ["places"],
});initMap() {let center = {};//地图中心店const mapOptions = {center: center,zoom: 12,disableDefaultUI: true,};loader.load().then((google) => {const map = new google.maps.Map(document.getElementById("mapBox"),mapOptions);}).catch((e) => {// do somethingconsole.log(e);});
},

其他小方法1：设置marker

//单个设置let center = { lat: this.mapData.lat, lng: this.mapData.lon };new google.maps.Marker({position: center,map,});//设置多个marker
let list = this.List;
for (let i = 0; i < list.length; i++) {// 如果有为0的数据就不展示if (list[i].dynamic === null) {return;}//设置markersnew google.maps.Marker({position: { lat: list[i].dynamic.lat, lng: list[i].dynamic.lon },map,});
}

其他小方法2：设置infowindow，并点击

let marker = new google.maps.Marker({position: { lat: data.lat, lng: data.lon },map,
});
let infowindow = new google.maps.InfoWindow();
const contentString ='<div class="cont" id="content1><div class="title">' +data.name +'</div></div>'
infowindow.setContent(contentString);//infowindow添加数据
infowindow.open(map, marker);//infowindow直接打开
google.maps.event.addListener(infowindow, "domready", function () {//infowindow dom生成后调取方法document.getElementById("content1").addEventListener("click", function () {//得到这个div，然后添加点击方法console.log("Shuhju", data);});
});

其他小方法3：画一个圆

new google.maps.Circle({strokeColor: "#25b2ee",strokeOpacity: 0.9,strokeWeight: 2,fillColor: "#25b2ee",fillOpacity: 0.2,map,center: { lat: this.mapData.lat, lng: this.mapData.lon },radius: 15000, //单位是米
});

总结

以上就是我在vue中使用google地图的全过程了
如果还有其他更好用的，可以一起探讨一下

【VUE】在vue中使用google地图相关推荐

【转】在你的博客中添加Google地图(Use Google Map API On Your Bolg)
在你的博客中添加Google地图(Use Google Map API On Your Bolg) *+申请一组 Google Maps API Key 在使用 Google Maps API 之前, ...
vue中使用google地图（自定义label、信息窗口）
最近公司爱尔兰项目需要使用google地图,项目还是用vue写的,那我就寻思找个vue能用的google地图的插件吧,找了vue2-google-maps,这个插件确实还行,而且github上还有ap ...
在MFC对话框中使用Google地图
最进实验室的项目,需要用到GPS或者北斗定位,于是乎我的上位机部分就要实现地图界面,并且实现输入经纬度值在地图中实现显示. 到网上收了很多的关于Google地图方面的应用,我知道了要用到JAVASCR ...
如何在制作的网页中加入google地图
http://i.mtime.com/5667366/blog/6875975/ Google Maps JavaScript API V3 教程注意:以下网页中提到的 Google Maps Ja ...
Android中使用Google 地图
第一步:建一个包含Google APIs的工程第二步:获取Android Maps API 金钥第三步:载入MapView 第四步:通过MapController控制地图缩放与移动获取密钥的方法 ...
网页中调用Google地图
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
把google地图和 Bing地图无缝集合到 ArcMap中 —— ArcBruTile
前一段时间听师兄说有个ArcMap的插件,可以在ArcMap中打开google 地图和Bing地图,而且是带准确坐标那种.于是试了一下,感觉很不错,果然能够在ArcMap中打开,插件装完后是一个工具条 ...
Android 开发笔记 Google地图定位与路线显示
当你的应用需要加入Google地图,并且需要根据两点坐标规划路线时,就需要在应用中加入Google地图,调用指定的api获取路线数据,再把数据显示出来. 1.加载google地图,实例化一个地图视图对 ...
uber_像Uber这样的Android Google地图样式
uber Have you ever noticed how Uber and other few popular location-based applications have a differe ...

【VUE】在vue中使用google地图

文章目录

前言

前期准备

一、获取google地图的key

二、使用步骤

1.安装google官方依赖

2.使用googlemap

其他小方法1：设置marker

其他小方法2：设置infowindow，并点击

其他小方法3：画一个圆

总结

【VUE】在vue中使用google地图相关推荐

最新文章

热门文章