VUE 下简单的谷歌地图搜索

在Vue.js应用中集成谷歌地图（Google Maps）可以极大地提升用户体验，特别是在地理位置相关的项目中。本文将详细讲解如何使用`@googlemaps/js-api-loader`库来实现简单的谷歌地图搜索功能，以及如何在地图上进行标注。 让我们了解`@googlemaps/js-api-loader`库。这是一个官方提供的模块，用于异步加载谷歌地图JavaScript API。它简化了API的加载过程，避免了手动插入HTML脚本标签，并允许我们更灵活地配置API参数。要安装这个库，你可以使用npm或yarn： ```bash npm install @googlemaps/js-api-loader # 或者 yarn add @googlemaps/js-api-loader ``` 接下来，我们需要在Vue组件中引入并初始化谷歌地图API。在组件的`mounted`生命周期钩子中调用`Loader`的`load`方法： ```javascript <template> <div ref="map" style="height: 400px;"></div> </template> <script> import { Loader } from '@googlemaps/js-api-loader'; export default { data() { return { map: null, marker: null, }; }, mounted() { const loader = new Loader({ apiKey: 'your_api_key', // 替换为你的谷歌地图API密钥 version: 'weekly', libraries: ['places'], // 加载地点库以支持地址搜索 }); loader.load().then((google) => { this.initMap(google); }); }, methods: { initMap(google) { this.map = new google.maps.Map(this.$refs.map, { center: { lat: -34.397, lng: 150.644 }, // 初始地图中心点 zoom: 8, // 初始缩放级别 }); const input = document.createElement('input'); input.type = 'text'; input.id = 'searchInput'; this.$refs.map.appendChild(input); const searchBox = new google.maps.places.SearchBox(input); this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); searchBox.addListener('places_changed', () => { const places = searchBox.getPlaces(); if (places.length === 0) return; this.clearMarkers(); const firstPlace = places[0]; this.map.setCenter(firstPlace.geometry.location); this.addMarker(firstPlace.geometry.location); }); }, addMarker(location) { if (this.marker) { this.marker.setMap(null); } this.marker = new google.maps.Marker({ position: location, map: this.map, }); }, clearMarkers() { if (this.marker) { this.marker.setMap(null); this.marker = null; } }, }, }; </script> ``` 在上述代码中，我们创建了一个地图容器，然后使用`Loader`加载谷歌地图API。一旦API加载完成，我们初始化地图并在页面上添加一个搜索框。当用户在搜索框中输入地址并按下回车键时，地图会自动更新到搜索结果的位置，并在地图上添加一个标记。 注意，你需要在Google Cloud Console中获取一个有效的API密钥，并启用“Maps JavaScript API”和“Places API”服务。此外，确保你的应用有适当的地理限制设置，以防止API滥用。 这个例子展示了如何在Vue.js应用中集成基本的谷歌地图搜索功能。你可以进一步扩展这个功能，例如添加自定义事件监听器、调整地图样式、实现拖动标记等功能。通过结合Vue.js的响应式特性，可以轻松地与应用程序的其他部分交互，提供更丰富的用户体验。