没问题！我帮你在现有代码里集成地点搜索框功能，下面是修改后的完整代码，同时我会说明关键的改动点：

修改后的完整代码 #

<!-- 新增地点搜索输入框 -->
<input id="searchBox" type="text" placeholder="搜索地点..." style="width:100%;padding:8px;margin-bottom:10px;">
<div id="googleMap" style="width:100%;height:400px;"></div>

<script>
function myMap() {
  var mapProp= {
    center:new google.maps.LatLng(12.9716, 77.5946),
    zoom:10,
  };
  var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

  // 初始化地点搜索自动补全功能
  var searchInput = document.getElementById('searchBox');
  var autocomplete = new google.maps.places.Autocomplete(searchInput);
  // 将搜索范围绑定到当前地图的边界，提升搜索准确性
  autocomplete.bindTo('bounds', map);

  // 监听用户选择搜索结果的事件
  autocomplete.addListener('place_changed', function() {
    var selectedPlace = autocomplete.getPlace();
    
    // 校验是否获取到有效地点坐标
    if (!selectedPlace.geometry || !selectedPlace.geometry.location) {
      alert('无法获取该地点的位置信息，请尝试其他关键词');
      return;
    }

    // 根据地点的视图范围调整地图视角
    if (selectedPlace.geometry.viewport) {
      map.fitBounds(selectedPlace.geometry.viewport);
    } else {
      map.setCenter(selectedPlace.geometry.location);
      map.setZoom(15); // 放大到适合查看地点的级别
    }

    // 在选中的地点添加标记
    placeMarker(selectedPlace.geometry.location, map);
    // 更新经纬度输入框的值
    document.getElementById("latitude").value = selectedPlace.geometry.location.lat();
    document.getElementById("longitude").value = selectedPlace.geometry.location.lng();
  });

  // 保留你原有的点击地图添加标记、更新经纬度功能
  google.maps.event.addListener(map, 'click', function(e) {
    placeMarker(e.latLng, map);
    document.getElementById("latitude").value = e.latLng.lat();
    document.getElementById("longitude").value = e.latLng.lng();
  });

  function placeMarker(position, map) {
    var marker = new google.maps.Marker({
      position: position,
      map: map
    });
    map.panTo(position);
  }
}
</script>

<!-- 关键：添加libraries=places参数，否则地点搜索功能无法生效 -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&callback=myMap&libraries=places"></script>

关键改动说明 #

• 新增搜索框HTML：在地图上方添加了一个输入框，用于用户输入地点关键词
• 加载Places库：在Google Maps API的链接中添加了&libraries=places参数，因为地点自动补全功能依赖这个库
• 初始化Autocomplete：创建Autocomplete实例并绑定到搜索框，同时关联地图边界，让搜索结果更贴合当前地图范围
• 处理搜索结果：监听place_changed事件，当用户选择搜索结果后，自动调整地图视角、添加标记，并同步更新经纬度输入框的值
• 保留原有功能：你原来的点击地图添加标记、更新经纬度的逻辑完全保留，和新的搜索功能可以同时使用

内容的提问来源于stack exchange，提问作者Abhilash