不想看过程的直接在最下方下载完整代码即可

先上效果图

项目中引入 npm install @googlemaps/js-api-loader

npm install @googlemaps/js-api-loader

一. 地图及地图坐标点

1. 在需要使用google服务的页面引入@googlemaps/js-api-loader

import { Loader } from "@googlemaps/js-api-loader";
const loader = new Loader({// google服务的KEYapiKey: "***********",version: "weekly",libraries: ["places"]
});

2. 把地图搞出来，google服务的 KEY 记得填写

<template><view><view>google Map</view><view id="map" style="height: 100vh;"></view></view>
</template>
<script>
import { Loader } from "@googlemaps/js-api-loader";
const loader = new Loader({// google服务的KEYapiKey: "***********",version: "weekly",libraries: ["places"]
});
export default {data() { return {}},onLoad() {this.initMap()},methods:{initMap() {loader.load().then((google) => {const map = new google.maps.Map(document.getElementById("map"),{// 地图打开时的中心点位，根据自己需求自行更改center: { lat: 1.3553976, lng: 103.867750 },// 地图缩放参数zoom: 12,// 最大缩放参数maxZoom: 18,// 最小缩放参数minZoom: 4,// 禁用默认UIdisableDefaultUI: true})}).catch((e) => {console.log(e)})},},
}
</script>

效果图

3. 添加标记点，以及标记点信息

initMap() {loader.load().then((google) => {const map = new google.maps.Map(document.getElementById("map"),{// 地图打开时的中心点位，经纬度是数字Number类型的center: { lat: 1.3553976, lng: 103.867750 },// 地图缩放参数zoom: 12,// 最大缩放参数maxZoom: 18,// 最小缩放参数minZoom: 4,// 禁用默认UIdisableDefaultUI: true})const mapList = [{ lat: 22.5377182, lng: 113.9564364, label: '疫情什么时候结束？' },{ lat: 1.3520823, lng: 103.8198378, label: '叫我靓仔' },]mapList.forEach(x => {x.marker = new google.maps.Marker({// 经纬度是数字Number类型的，注意后台返回的数据类型，不符合的自己手动转换position: { lat: x.lat, lng: x.lng },// 标记点是否可拖动draggable: true,map: map})x.infowindow = new google.maps.InfoWindow({// 可以使用 <br />换行,content: `<div>${x.label}</div><br />我换行了`,// 信息窗口最大宽度maxWidth: 200,});// 打开信息窗口x.infowindow.open({anchor: x.marker,map,shouldFocus: false,});})}).catch((e) => {console.log(e)})}

注意：这个时候标记点虽然出现了，但是只能看见一个标记点，数据里面是有两个坐标点的，此时只能手动缩放地图才能看见两个标记点

4. 坐标点优化

initMap() {loader.load().then((google) => {// 缩放视野以包含所有给定的坐标点const bounds = new google.maps.LatLngBounds()const map = new google.maps.Map(document.getElementById("map"),{// 地图打开时的中心点位，经纬度是数字Number类型的center: { lat: 1.3553976, lng: 103.867750 },// 地图缩放参数zoom: 12,// 最大缩放参数maxZoom: 18,// 最小缩放参数minZoom: 4,// 禁用默认UIdisableDefaultUI: true})const mapList = [{ lat: 22.5377182, lng: 113.9564364, label: '疫情什么时候结束？' },{ lat: 1.3520823, lng: 103.8198378, label: '叫我靓仔' },]mapList.forEach(x => {x.marker = new google.maps.Marker({// 经纬度是数字Number类型的，注意后台返回的数据类型，不符合的自己手动转换position: { lat: x.lat, lng: x.lng },// 标记点是否可拖动draggable: true,map: map})x.infowindow = new google.maps.InfoWindow({// 可以使用 <br />换行,content: `<div>${x.label}</div><br />我换行了`,// 信息窗口最大宽度maxWidth: 200,});// 打开信息窗口x.infowindow.open({anchor: x.marker,map,shouldFocus: false,})bounds.extend({ lat: x.lat, lng: x.lng })})map.fitBounds(bounds)}).catch((e) => {console.log(e)})}

此时地图就可以自动缩放显示多个坐标点了

二. 地址模糊匹配

1.在需要使用google服务的页面引入@googlemaps/js-api-loader （比上面地图的多几个参数，下面会一个一个进行说明）

记得填写自己的google地图 KEY

/*** @desc:   地址模糊匹配* @author: zhangxinying* @email:  xy18727180765@sina.com* @date:   2022-09-19 13:52:34*/<template><view><view class="" id="map" ref="map" style="height: 0"></view><view style="padding: 30rpx;"><input :value="value" type="text" placeholder="请输入" class="search" @input="inputChange" /></view></view>
</template><script>
import { Loader } from "@googlemaps/js-api-loader";
const loader = new Loader({// google服务的KEYapiKey: "***************",version: "weekly",libraries: ["places"]
});
// 输入框模糊查询
let searchBox = undefined
// 搜索地点和检索地点详细信息
let service = undefined
// 对请求进行地理编码
let geocoder = undefined
export default {data() { return {value: ''}},onLoad() {this.initMap()},methods:{initMap() {loader.load().then((google) => {const map = new google.maps.Map(document.getElementById("map"),{center: { lat: 1.3553976, lng: 103.867750 }})// 自动完成请求 参考文档：https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service?hl=ensearchBox = new google.maps.places.AutocompleteService()// 搜索地点和检索地点详细信息 参考文档：https://developers.google.com/maps/documentation/javascript/reference/places-service?hl=enservice = new google.maps.places.PlacesService(map)// 对请求进行地理编码 参考文档：https://developers.google.com/maps/documentation/javascript/reference/geocoder?hl=engeocoder = new google.maps.Geocoder()}).catch((e) => {console.log(e)})},// 输入框数值变化inputChange(e) {}},
}
</script><style scoped lang="scss">.search {height: 70rpx; padding: 0 30rpx; border: 1rpx solid #ccc; border-radius: 10rpx;}
</style>

2. 输入文字进行模糊查询

注意：下面代码里面的inputChange方法我自己加了中国广州深圳几个文字，因为在正常开发中这里的省市区是自己下拉联动选择的，我这里为了方便写死了，大家可以根据实际开发情况进行拼接

/*** @desc:   地址模糊匹配* @author: zhangxinying* @email:  xy18727180765@sina.com* @date:   2022-09-19 13:52:34*/<template><view><view class="" id="map" ref="map" style="height: 0"></view><view style="padding: 30rpx;"><input :value="value" type="text" placeholder="请输入" class="search" @input="inputChange" /></view><view class="card" v-if="list.length > 0"><view class="item" v-for="(item, index) in list" :key="index"><view @click="confirm(item)"><span class="title">{{item.structured_formatting.main_text}}</span><span>{{item.structured_formatting.secondary_text}}</span></view></view></view></view>
</template><script>
import { Loader } from "@googlemaps/js-api-loader";
const loader = new Loader({// google服务的KEYapiKey: "*************",version: "weekly",libraries: ["places"]
});
// 输入框模糊查询
let searchBox = undefined
// 搜索地点和检索地点详细信息
let service = undefined
// 对请求进行地理编码
let geocoder = undefined
export default {data() { return {value: '',// 模糊匹配数据list: []}},onLoad() {this.initMap()},methods:{initMap() {loader.load().then((google) => {const map = new google.maps.Map(document.getElementById("map"),{center: { lat: 1.3553976, lng: 103.867750 }})// 自动完成请求 参考文档：https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service?hl=ensearchBox = new google.maps.places.AutocompleteService()// 搜索地点和检索地点详细信息 参考文档：https://developers.google.com/maps/documentation/javascript/reference/places-service?hl=enservice = new google.maps.places.PlacesService(map)// 对请求进行地理编码 参考文档：https://developers.google.com/maps/documentation/javascript/reference/geocoder?hl=engeocoder = new google.maps.Geocoder()}).catch((e) => {console.log(e)})},// 输入框数值变化inputChange(e) {const { value } = e.detailif (!value) return this.list = []// searchBox 自动完成请求（模糊匹配）let str = '中国广州深圳' + valuesearchBox.getPlacePredictions({ input: str },(event, status) => {console.log(event, '===')if (status === 'OK') {this.list = event || []// place_id 后面有用，所以只保留存在place_id的数据this.list = this.list.filter(x => x.place_id)} else {this.list = []uni.showToast({title: 'getPlacePredictions' + status,icon: 'none'})}})},confirm(e) {}},
}
</script><style scoped lang="scss">.search {height: 70rpx; padding: 0 30rpx; border: 1rpx solid #ccc; border-radius: 10rpx;}.card {padding: 0 30rpx;.item {padding: 20rpx 0;border-bottom: 2rpx solid #ccc;.title {margin-right: 20rpx;font-weight: 700;}}}</style>

3. 选择模糊查询出来的数据获取详细地址信息（国家省市区，经纬度，邮编之类的详细数据）

上面提到的 place_id 在这里就用上了

/*** @desc:   地址模糊匹配* @author: zhangxinying* @email:  xy18727180765@sina.com* @date:   2022-09-19 13:52:34*/<template><view><view class="" id="map" ref="map" style="height: 0"></view><view style="padding: 30rpx;"><input :value="value" type="text" placeholder="请输入" class="search" @input="inputChange" /></view><view class="card" v-if="list.length > 0"><view class="item" v-for="(item, index) in list" :key="index"><view @click="confirm(item)"><span class="title">{{item.structured_formatting.main_text}}</span><span>{{item.structured_formatting.secondary_text}}</span></view></view></view></view>
</template><script>
import { Loader } from "@googlemaps/js-api-loader";
const loader = new Loader({// google服务的KEYapiKey: "*********************",version: "weekly",libraries: ["places"]
});
// 输入框模糊查询
let searchBox = undefined
// 搜索地点和检索地点详细信息
let service = undefined
// 对请求进行地理编码
let geocoder = undefined
export default {data() { return {value: '',// 模糊匹配数据list: []}},onLoad() {this.initMap()},methods:{initMap() {loader.load().then((google) => {const map = new google.maps.Map(document.getElementById("map"),{center: { lat: 1.3553976, lng: 103.867750 }})// 自动完成请求 参考文档：https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service?hl=ensearchBox = new google.maps.places.AutocompleteService()// 搜索地点和检索地点详细信息 参考文档：https://developers.google.com/maps/documentation/javascript/reference/places-service?hl=enservice = new google.maps.places.PlacesService(map)// 对请求进行地理编码 参考文档：https://developers.google.com/maps/documentation/javascript/reference/geocoder?hl=engeocoder = new google.maps.Geocoder()}).catch((e) => {console.log(e)})},// 输入框数值变化inputChange(e) {const { value } = e.detailif (!value) return this.list = []// searchBox 自动完成请求（模糊匹配）let str = '中国广州深圳' + valuesearchBox.getPlacePredictions({ input: str },(event, status) => {console.log(event, '===')if (status === 'OK') {this.list = event || []this.list = this.list.filter(x => x.place_id)} else {this.list = []uni.showToast({title: 'getPlacePredictions' + status,icon: 'none'})}})},// 点击一行地址confirm(e) {// 搜索地点和检索地点详细信息service.getDetails({placeId: e.place_id}, (event, status) => {if (status === 'OK') {console.log(event, '===')} else {uni.hideLoading()uni.showToast({title: 'getDetails' + status,icon: 'none'})}})}},
}
</script><style scoped lang="scss">.search {height: 70rpx; padding: 0 30rpx; border: 1rpx solid #ccc; border-radius: 10rpx;}.card {padding: 0 30rpx;.item {padding: 20rpx 0;border-bottom: 2rpx solid #ccc;.title {margin-right: 20rpx;font-weight: 700;}}}</style>

上面是模糊匹配利用place_id请求回来的详细地址信息，如果我不想用它返回的模糊匹配数据呢，我就想使用我自己输入的文字，请看下面

4. 使用自己输入的文字请求地址详情信息

注意：这里我也拼接了中国广州深圳几个文字进行搜索了

/*** @desc:   地址模糊匹配* @author: zhangxinying* @email:  xy18727180765@sina.com* @date:   2022-09-19 13:52:34*/<template><view><view class="" id="map" ref="map" style="height: 0"></view><view style="display: flex; padding: 30rpx;"><input v-model="value" type="text" placeholder="请输入" class="search" @input="inputChange" /><view class="btn" @click="search">搜索</view></view><view class="card" v-if="list.length > 0"><view class="item" v-for="(item, index) in list" :key="index"><view @click="confirm(item)"><span class="title">{{item.structured_formatting.main_text}}</span><span>{{item.structured_formatting.secondary_text}}</span></view></view></view></view>
</template><script>
import { Loader } from "@googlemaps/js-api-loader";
const loader = new Loader({// google服务的KEYapiKey: "***************",version: "weekly",libraries: ["places"]
});
// 输入框模糊查询
let searchBox = undefined
// 搜索地点和检索地点详细信息
let service = undefined
// 对请求进行地理编码
let geocoder = undefined
export default {data() { return {value: '',// 模糊匹配数据list: []}},onLoad() {this.initMap()},methods:{initMap() {loader.load().then((google) => {const map = new google.maps.Map(document.getElementById("map"),{center: { lat: 1.3553976, lng: 103.867750 }})// 自动完成请求 参考文档：https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service?hl=ensearchBox = new google.maps.places.AutocompleteService()// 搜索地点和检索地点详细信息 参考文档：https://developers.google.com/maps/documentation/javascript/reference/places-service?hl=enservice = new google.maps.places.PlacesService(map)// 对请求进行地理编码 参考文档：https://developers.google.com/maps/documentation/javascript/reference/geocoder?hl=engeocoder = new google.maps.Geocoder()}).catch((e) => {console.log(e)})},// 输入框数值变化inputChange(e) {const { value } = e.detailif (!value) return this.list = []// searchBox 自动完成请求（模糊匹配）let str = '中国广州深圳' + valuesearchBox.getPlacePredictions({ input: str },(event, status) => {if (status === 'OK') {this.list = event || []this.list = this.list.filter(x => x.place_id)} else {this.list = []uni.showToast({title: 'getPlacePredictions' + status,icon: 'none'})}})},// 点击一行地址confirm(e) {// 搜索地点和检索地点详细信息service.getDetails({placeId: e.place_id}, (event, status) => {if (status === 'OK') {console.log(event, '===')} else {uni.hideLoading()uni.showToast({title: 'getDetails' + status,icon: 'none'})}})},// 搜索search() {if (!this.value) returnlet str = '中国广州深圳' + this.value// 对请求进行地理编码geocoder.geocode( { 'address': str }, (event, status) => {if (status == 'OK') {console.log(event, '===')} else {uni.hideLoading()uni.showToast({title: 'geocode' + status,icon: 'none'})}})}},
}
</script><style scoped lang="scss">.search {flex: 1;height: 70rpx; padding: 0 30rpx; margin-right: 20rpx;border: 1rpx solid #ccc; border-radius: 10rpx;}.btn {color: #fff;font-size: 28rpx;height: 70rpx;line-height: 70rpx;padding: 0 20rpx; background: #3c9cff; border-radius: 10rpx;}.card {padding: 0 30rpx;.item {padding: 20rpx 0;border-bottom: 2rpx solid #ccc;.title {margin-right: 20rpx;font-weight: 700;}}}</style>

app端跳转google地图移步：https://blog.csdn.net/weixin_43877778/article/details/123392493?spm=1001.2014.3001.5501

googleMap 完整代码下载https://gitee.com/p3k/google-map.git

uniapp H5端使用 google 地图 @googlemaps/js-api-loader，文字地点模糊查询，地点省市区详细数据，经纬度信息，markers地图标记点相关推荐

1. uniapp h5、app引用外部在线js

   uniapp h5.app引用外部在线js 1. H5 在app.vue var script = document.createElement('script'); script.src = &qu ...

2. corodva中使用高德地图web js api

   高德地图web js api有一个其他的地图插件都没有的功能,就是地图俯角可以达到80°,而其他的地图api(百度45°,mapbox60°),包括高德地图的Android sdk都无法达到这样的大角 ...

3. 淘宝商品评价api接口(app、h5端)，淘宝评论视频API接口，淘宝评论API接口

   淘宝商品评价api接口(app.h5端),淘宝评论视频API接口,淘宝评论API接口可以通过商品id,获取商品评价信息.评价内容.买家秀图片.评论浏览量.评价视频.评价追评等页面上展示的数据均可以拿到 ...

4. android地图选点,【百度地图】Android实现地图展示、定位、选点、地点查询和地点模糊查询功能...

   1.集成百度地图sdk 请查看百度地图开放平台,这里有很详细的教程. 2.地图展示功能 将地图控件放入到当前页面的布局中即可,如下: MapView 在页面代码中,通过id获取到MapView的对象, ...

5. js根据数据关键字实现模糊查询功能

   js根据数据关键字实现模糊查询功能 模糊查询 实现模糊查询功能的步骤和一般方法 第一步:创建假数据或请求接口数据 第二步:分析数据格式,处理数据 第三步:验证功能 完整代码 模糊查询 模糊查询功能是指 ...

6. uniapp H5端使用高德地图完成路线规划

   本项目是H5端,APP端地图的使用方法请参考我的另一篇博客uniapp,map地图组件打包原生APP 首先到高德地图API,申请web端key 参考高德H5端教程开始写代码高德地图JS API 1.准 ...

7. uniapp H5端 使用百度地图API

   由于uniappH5端自带的腾讯地图点击不返回坐标,也获取不到具体位置,由于项目的需求和uniapp自带的组件不符合,于是使用了百度地图 文章目录 前言 一.实现效果额 二.使用步骤 1.引入 2.具 ...

8. uniapp H5端精准定位

   H5端使用 uni.getLocation() 获取位置时,会根据手机浏览器不同有差异. 1. Android 手机浏览器 在安卓浏览器上运行.获取位置时,会有一个获取位置的提示,只要点同意就可以获取 ...

9. 高德地图 Web JS API示例学习笔记（1）——地图（生命周期、地图属性）

   文章目录 生命周期 地图的创建 异步加载地图 地图属性 获取地图中心点/级别 设置地图中心点/级别 获取地图当前行政区属性信息 设置地图当前行政区 设置/获取地图显示范围 限制地图显示范围 地图的平移 ...

最新文章

1. django教程目录
2. nodejs 获取文件路径_Qunar 酒店 Nodejs 覆盖率收集实践
3. Syntax Error: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.
4. 在Asp.Net Core中使用ModelConvention实现全局过滤器隔离
5. xmind-HTTP协议
6. Starter Kit for ASP.NET 2.0 家族又添新丁！
7. 不想做科技第一的金融公司，不是好的养老去处
8. 极速理解设计模式系列：10.抽象工厂模式(Abstract Factory Pattern)
9. java几次,java兑现限制用户几次登录
10. java中json获取key值_如何获取JsonObject中key的值
11. 怎么把一台手机的便签转移到另一台手机上?
12. react路由不显示下划线
13. 仿钉钉后台流程设计图
14. EPICS--areaDetector--ADEiger
15. 电力行业三次谐波计算
16. UE4元数据关键字的应用与含义（一）
17. 分享知识-快乐自己：oracle12c创建用户提示ORA-65096：公用用户名或角色无效
18. java发送带图片的邮件代码
19. Demystifying Ethernet Types— Difference between Cat5e, Cat 6, and Cat7
20. 微信无感知检测单项好友【WeTool 免费版】【微信如何检测单向好友？】

热门文章

1. 使用TypeScript开发微信小程序的方法
2. Typec转HDMI+PD3.0+U3+U2+SD/TF读卡拓展七合一方案设计电路|CS5266+MA8621设计参考电路
3. 洛谷P5266 学籍管理
4. 【Angular】Angular开发组件
5. 【OR】约束优化：二阶充分条件
6. 【蓝桥真题5】带三百人训练了十天精选蓝桥真题，看看他们都练些什么（三门语言题解）
7. 云享 值得一用的在线文档即时通讯平台 新用户持续免费
8. 再叙AngularJS
9. C语言实现三子棋（五子棋可以改赢得函数即可）
10. React-概叙-JSX