Question

我看过类似的问题并且无法解决这个问题，尽管我认为我很接近。

目标是拥有一个允许地址输入的表单，点击提交按钮后，地址应作为标记添加到已加载的地图上。

我的示例代码遍布整个地方，但这是我一直在使用的（从Laravel 4视图重构）：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
    </style>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key="> // Placeholder API Key
    </script>
    <script type="text/javascript">
        function initialize() {
          var mapOptions = {
            center: new google.maps.LatLng(29.428459, -98.492433), // Centered on downtown SA by default
            zoom: 11
          };
          var map = new google.maps.Map(document.getElementById("map-canvas"),
              mapOptions);
        }
        google.maps.event.addDomListener(window, 'load', initialize);
        </script>
  </head>
  <body>
    <br>
        <div id="user-input-form" style="width: 500px; height: 200px; margin-left: 20px;">
            <input id="user-input" class="form-group form-control" name="user-input" type="text" value="112 E. Pecan St San Antonio TX 78205" placeholder="">
            <button id="user-input-btn" class="btn btn-default" action="">Submit</button>

            <p id="address-text"></p>
        </div>

        </div>
        <div id="map-canvas" style="width: 500px; height: 400px;"></div>


    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    <script type="text/javascript">
      function addMarker() {        // Function to add markers on button click
          var marker = new google.maps.Marker({
              position: latlng,  // set to location which corresponds with user input?  Don't want to recenter map each time.
              map: map,
                draggable:false,
                animation: google.maps.Animation.DROP,
              title:"Marker #",
            icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
          });
      }

      $('#user-input-btn').click(function () {
            var address = $('#user-input').val();  // Grab value of input field above
            console.log(address);

            $('#address-text').text('You entered: ' + address);
            $('#address').text(address);

            // Call addMarker function?

      }); // end event from button click

    </script>
  </body>
</html>

任何人都可以帮我解决这个问题吗？我正在尝试做一些更复杂的事情，但能够：

通过地址提交添加标记，方法是点击表单/按钮。
使用重置按钮重置地图以清除所有叠加层。

将是一个非常棒的一步。

谢谢

Answer 1

好的，谢谢kinakuta，我能够概述以下内容并实施它：

<script type="text/javascript">
    $('#addr-btn').click(function () {
        // Set variable address equal to user input
        var address = $('#addr-value').val();

        // Geocode address to get lat/lng
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({ 'address': address }, function(result, status) {

            if (status == google.maps.GeocoderStatus.OK) {
              // console.log(result);

              var latLngObj = result[0]["geometry"]["location"];
              console.log(latLngObj);
            }

        // Create new marker based on lat/lng
        var marker = new google.maps.Marker({
            position: latLngObj,
            map: map,
            title:"Hello World!"
        });

            // Store marker in array to keep all markers on the page, and allow easy reset

        });
    });
</script>

谢谢！

使用Google地图在地址输入和按钮点击上制作多个标记

1 个答案: