vue谷歌地图检索东京的港屋咖啡
时间: 2023-10-30 10:05:38 浏览: 72
您可以使用 Vue 和谷歌地图 API 来检索东京的港屋咖啡。首先,您需要在 Vue 项目中安装并使用谷歌地图 API。在您的项目中引入谷歌地图 API,然后使用以下代码来检索东京的港屋咖啡:
```javascript
<template>
<div>
<input type="text" v-model="searchQuery" placeholder="输入关键字">
<button @click="search">搜索</button>
<div id="map"></div>
</div>
</template>
<script>
export default {
data() {
return {
searchQuery: "",
};
},
mounted() {
this.loadMap();
},
methods: {
loadMap() {
const map = new window.google.maps.Map(document.getElementById("map"), {
center: { lat: 35.6895, lng: 139.6917 }, // 东京的经纬度
zoom: 13, // 缩放级别
});
this.map = map;
},
search() {
const service = new window.google.maps.places.PlacesService(this.map);
service.textSearch(
{
query: "东京港屋咖啡",
location: this.map.getCenter(),
radius: 5000,
},
(results, status) => {
if (status === window.google.maps.places.PlacesServiceStatus.OK) {
for (let i = 0; i < results.length; i++) {
this.createMarker(results[i]);
}
}
}
);
},
createMarker(place) {
const marker = new window.google.maps.Marker({
map: this.map,
position: place.geometry.location,
});
},
},
};
</script>
<style>
#map {
height: 400px;
}
</style>
```
上述代码首先在组件中创建了一个 input 输入框和一个搜索按钮。当用户输入关键字并点击搜索按钮时,会触发 `search` 方法。该方法使用谷歌地图的 `textSearch` 函数来搜索东京地区的港屋咖啡。搜索结果会在地图上标记出来。
请确保在项目中正确引入谷歌地图 API,并在 `mounted` 钩子中调用 `loadMap` 方法来加载地图。在谷歌云平台上创建一个项目并启用谷歌地图 API,然后将 API 密钥替换到适当的位置。
希望这可以帮助到您!如果有任何问题,请随时提问。