Uniapp中如何使用谷歌地图
1. 引入谷歌地图JS API
要在Uniapp中使用谷歌地图，我们需要先引入谷歌地图JS API。在index.html中，添加如下代码：
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>其中，YOUR_API_KEY需要替换为自己申请的API Key。
申请API Key的方法如下：
1.1 进入谷歌云控制台
在浏览器中访问https://console.cloud.google.com/，并使用谷歌账号登陆。进入控制台后，点击左上角的菜单，选择“APIs& Services” > “Credentials”：
1.2 创建API Key
在Credentials页面，点击“Create credentials”按钮，选择“API Key”：
点击后，会自动生成一个API Key：
我们需要将这个API Key复制下来，然后在引入谷歌地图JS API时，将YOUR_API_KEY替换为复制的值。
2. 创建谷歌地图组件
在Uniapp中，创建谷歌地图组件的方法如下：
<template>
<view>
<map :style="height: 100%; width: 100%" />
</view>
</template>
<script>
export default {
name: 'GoogleMap',
data() {
return {
map: null
}
},
mounted() {
this.initMap()
},
methods: {
initMap() {
this.map = new google.maps.Map(this.$refs.map, {
center: { lat: 37.7749, lng: -122.4194 },
zoom: 8
})
}
}
}
</script>
在上面的代码中，我们创建了一个名为GoogleMap的组件，该组件包含一个地图和一个initMap方法。在mounted钩子中，我们调用initMap方法来初始化地图。
在initMap方法中，我们使用google.maps.Map构造函数创建一个地图，并传入一个DOM元素和一些配置选项。在这个例子中，我们将地图的中心设置为旧金山，缩放级别为8。
使用谷歌地图的时候，通常需要在mounted钩子中调用initMap方法，让组件在渲染后初始化地图。在这个例子中，我们使用了refs属性来获取DOM元素，这是Vue.js的一种特殊语法。
3. 在地图上添加标记
使用谷歌地图，我们可以在地图上添加标记，以标识位置。下面是一个添加标记的例子：
<template>
<view>
<map :style="height: 100%; width: 100%" />
</view>
</template>
<script>
export default {
name: 'GoogleMap',
data() {
return {
map: null
}
},
mounted() {
this.initMap()
},
methods: {
initMap() {
this.map = new google.maps.Map(this.$refs.map, {
center: { lat: 37.7749, lng: -122.4194 },
zoom: 8
})
const marker = new google.maps.Marker({
position: { lat: 37.7749, lng: -122.4194 },
map: this.map,
title: 'Hello World!'
});
}
}
}
</script>
在这个例子中，我们在initMap方法中，创建了一个名为marker的标记，并将其添加到地图上。标记的位置是旧金山，标题是“Hello World!”。
4. 获取当前位置
在地图应用中，通常需要获得用户的当前位置。使用谷歌地图JS API，我们可以轻松地实现这一点。
获取当前位置的方法如下：
navigator.geolocation.getCurrentPosition(position => {
const { latitude, longitude } = position.coords;
const pos = {
lat: latitude,
lng: longitude
};
this.map.setCenter(pos);
const marker = new google.maps.Marker({
position: pos,
map: this.map,
title: 'Your Location'
});
});
上面的代码，使用HTML5的Geolocation API获取当前位置，然后将地图中心设置为当前位置，并在地图上添加一个标记。
需要注意的是，使用Geolocation API需要HTTPS协议，否则会弹出提示框，询问用户是否允许获取位置信息。
5. 在谷歌地图上绘制路径
使用谷歌地图JS API，我们可以在地图上绘制路径。
绘制路径的方法如下：
const directionsService = new google.maps.DirectionsService();
const directionsRenderer = new google.maps.DirectionsRenderer({
map: this.map
});
const options = {
origin: 'San Francisco, CA',
destination: 'Los Angeles, CA',
travelMode: 'DRIVING'
};
directionsService.route(options, (result, status) => {
if (status === 'OK') {
directionsRenderer.setDirections(result);
} else {
alert('Directions request failed due to ' + status);
}
});
在上面的代码中，我们使用google.maps.DirectionsService创建一个路线服务对象，使用google.maps.DirectionsRenderer创建一个路线渲染器对象。然后，我们调用route方法，向路线服务对象发送起点、终点、出行方式等参数，获取路线信息，并将路线信息渲染在地图上。
需要注意的是，获取路线信息需要一定的时间，因此，我们需要使用回调函数来处理。
6. 结束语
本文介绍了在Uniapp中使用谷歌地图的一些基本方法，包括引入谷歌地图JS API、创建谷歌地图组件、添加标记、获取当前位置、绘制路径等。希望本文能帮助大家更好地使用谷歌地图。