Google地图--实现自动搜索地址和点击获取地图经纬度_vue使用谷歌地图点击获取经纬度-优快云博客

本文链接：https://blog.youkuaiyun.com/Ariel_201311/article/details/94437036

本文介绍如何实现Google地图应用中输入地址自动完成，并在地图上点击获取经纬度的功能。通过HTML、JS和CSS实现界面交互，启用Google Maps API并展示详细效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、实现效果

1、在搜索框输入地址，自动出现可定位地址选择
2、搜索地址后，刷新地图标注
3、点击地图其他区域，显示经纬度和点击的地址

tips：申请google api秘钥参考博客：https://blog.youkuaiyun.com/Ariel_201311/article/details/94441085

二、HTML

<div class="r-inputs">
	<div>
		经度：<input type="" name="" id="address_lng" value="经度" /> 
		纬度：<input type="" name="" id="address_lat" value="纬度" />
	</div>
	地址：<input type="" name="" id="address" value="address" class="r-address" />
</div>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map" style="width:800px; height:750px"></div>

<script src="js/jquery.min.js"></script>
//需要获取google地图的api_key
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocomplete" async defer></script>

三、JS

var lngtxt = "101.686855";
var lattxt = "3.139003";
var addresstxt = "吉隆坡";

var map;
var marker;
var infowindow;
var geocoder;
var markersArray = [];

function initAutocomplete() {
   
   
	var latlng = new google.maps.LatLng(lattxt, lngtxt);
	var myOptions = {
   
   
		zoom: 13