Google 地图最佳路线距离获取

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue2中,你可以使用谷歌地图的API来实现点击地图获取经纬度的功能。下面是一个简单的示例代码: 首先,在Vue组件中引入Google Maps API的脚本。你可以将以下代码添加到`index.html`文件的`<head>`标签中: ```html <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script> ``` 确保将`YOUR_API_KEY`替换为你自己的谷歌地图API密钥。 然后,在你的Vue组件中,你可以创建一个地图并添加一个监听器来获取点击事件的经纬度。以下是示例代码: ```vue <template> <div id="map"></div> </template> <script> export default { mounted() { // 初始化地图 this.initMap(); }, methods: { initMap() { // 创建地图 const map = new google.maps.Map(document.getElementById("map"), { center: { lat: 0, lng: 0 }, zoom: 8, }); // 添加点击事件监听器 map.addListener("click", (event) => { const lat = event.latLng.lat(); const lng = event.latLng.lng(); console.log(`经度:${lng.toFixed(6)}, 纬度:${lat.toFixed(6)}`); // 在这里可以对获取的经纬度进行处理或发送到后端等操作 }); }, }, }; </script> ``` 在上述代码中,我们首先在`mounted`生命周期钩子中调用`initMap`方法来初始化地图。在`initMap`方法中,我们创建了一个新的地图实例,并将其绑定到指定的DOM元素上。然后,我们添加了一个点击事件监听器,并在回调函数中获取了点击位置的经纬度。 请注意,你需要替换示例代码中的`YOUR_API_KEY`为你自己的谷歌地图API密钥。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值