如何在Google Map标记弹出框中添加输入控件？求示例代码

没问题！我来给你分享一个AngularJS环境下，给Google Maps Marker的InfoWindow添加表单控件（文本框、嵌套下拉框）的完整示例，这样点击Marker就能弹出带交互控件的窗口啦。

1. 先搞定基础依赖引入 #

首先要在页面里引入AngularJS和Google Maps API脚本，记得把YOUR_API_KEY换成你自己的Google Maps API密钥：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

2. 编写HTML结构 #

我们把地图容器和InfoWindow的表单模板放在Angular应用的作用域里，模板用text/ng-template来定义，方便后续编译复用：

<div ng-app="mapApp" ng-controller="MapController">
  <div id="map" style="height: 400px; width: 100%;"></div>

  <!-- 隐藏的InfoWindow表单模板 -->
  <script type="text/ng-template" id="infoWindowForm.html">
    <div class="info-window-content">
      <h4>填写地点信息</h4>
      <div class="form-item">
        <label>地点名称：</label>
        <input type="text" ng-model="formData.placeName" placeholder="输入名称" class="form-input">
      </div>
      <div class="form-item">
        <label>地点类型：</label>
        <select ng-model="formData.placeType" class="form-select">
          <option value="">请选择类型</option>
          <option value="food">餐饮</option>
          <option value="entertainment">娱乐</option>
          <option value="shopping">购物</option>
        </select>
      </div>
      <!-- 嵌套下拉框：根据类型显示对应的子选项 -->
      <div class="form-item" ng-show="formData.placeType === 'food'">
        <label>菜系：</label>
        <select ng-model="formData.foodType" class="form-select">
          <option value="">请选择菜系</option>
          <option value="chinese">中餐</option>
          <option value="western">西餐</option>
          <option value="japanese">日料</option>
        </select>
      </div>
      <button ng-click="saveForm()" class="submit-btn">保存信息</button>
    </div>
  </script>
</div>

3. 编写AngularJS控制器逻辑 #

核心是利用Angular的$compile服务，把模板编译成能识别Angular指令的DOM，再传给InfoWindow；同时绑定Marker的点击事件，处理表单的保存逻辑：

angular.module('mapApp', [])
.controller('MapController', ['$scope', '$compile', function($scope, $compile) {
  // 1. 初始化地图
  const map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 39.9042, lng: 116.4074}, // 北京坐标示例
    zoom: 13
  });

  // 2. 初始化表单数据
  $scope.formData = {
    placeName: '',
    placeType: '',
    foodType: ''
  };

  // 3. 编译Angular模板，生成InfoWindow可用的内容
  const compileInfoWindowContent = () => {
    const template = angular.element(document.getElementById('infoWindowForm.html').innerHTML);
    const compiledDom = $compile(template)($scope);
    // 手动触发digest，确保数据绑定生效
    $scope.$digest();
    return compiledDom[0];
  };

  // 4. 创建InfoWindow并绑定编译后的内容
  const infowindow = new google.maps.InfoWindow({
    content: compileInfoWindowContent()
  });

  // 5. 创建Marker并绑定点击事件
  const marker = new google.maps.Marker({
    position: {lat: 39.9042, lng: 116.4074},
    map: map,
    title: '点击打开表单'
  });

  marker.addListener('click', () => {
    // 可选：每次打开窗口时重置表单
    $scope.formData = {placeName: '', placeType: '', foodType: ''};
    infowindow.open(map, marker);
  });

  // 6. 表单保存方法
  $scope.saveForm = () => {
    console.log('保存的表单数据:', $scope.formData);
    // 这里可以添加提交到后端的逻辑
    alert('信息已保存！可在控制台查看详情');
    infowindow.close();
  };
}]);

4. 关键知识点说明 #

• $compile的作用：Google Maps的InfoWindow默认只会渲染纯DOM，通过Angular的$compile服务，能让模板里的ng-model、ng-show等指令正常工作，实现双向数据绑定和动态UI。
• 嵌套下拉框逻辑：用ng-show指令根据用户选择的「地点类型」，动态显示/隐藏「菜系」下拉框，实现交互性。
• 数据重置：点击Marker时重置表单数据，避免上次的输入残留，这个逻辑可以根据你的需求调整。

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