admin管理员组文章数量:1565368
1、如何接入谷歌地球js
首先打开谷歌地球官方api的文档网站
链接: 谷歌地球官方文档
然后根据官方的引导去谷歌map的配置页面申请API
注意!必须要申请谷歌API才能使用高级功能,并且申请API要求提供绑定一张谷歌账号所在地的银行信用卡,需要自己准备好。
下面的代码示例为如何引入谷歌地图api及需要加载的格式(VUE3+VITE)
// npm下载googlemap的包
npm install @googlemaps/js-api-loader
// 在所需要的页面单独引入谷歌地球的依赖
import { Loader } from "@googlemaps/js-api-loader"
// 定义谷歌地球参数,并初始化。
var map
const loader = new Loader({
apiKey: "你的谷歌地球秘钥",
version: "beta",
});
const mapOptions = {
"tilt": 0,
"heading": 0,
"zoom": 18,
"center": { lat:'经纬度注意要为数字类型才能识别', lng: '经纬度注意要为数字类型才能识别' },
"mapId": "谷歌地图自定义样式ID",
mapTypeId: "satellite",
'zoomControl': false,
'mapTypeControl': false,
'scaleControl': false,
'streetViewControl': false,
'rotateControl': false,
'fullscreenControl': false
};
// 加载谷歌地图方法
initMap()
function initMap() {
loader.load().then(() => {
//绑定DIV
const mapDiv = document.getElementById("map");
const apiLoader = new Loader(loader);
apiLoader.load();
map = new google.maps.Map(mapDiv, mapOptions);
initWebGLOverlayView(map)
//click事件获得定位
map.addListener("click", (e) => {
console.log(e.latLng.lat(),e.latLng.lng());
});
map.moveCamera({
center: new google.maps.LatLng(经度,纬度),
zoom: 16,//缩放等级
heading: 0,
tilt: 60
});
});
}
<template>
<div class="greetings">
<div style="height: 100vh" id="map"></div>
</div>
</template>
这样就完成了一个初始化的谷歌地球加载
谷歌地球官方提供的教程为js和react实际上还是有些坑在的,比如加载的方法和类型之类的,接下来写一下谷歌地球加载模型和画路线的方法,以及标点自定义图标等。
版权声明:本文标题:如何使用谷歌地球api(googlemap)配置web端地图(vue3) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1725991796a1051588.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论