Question

我想知道是否有人可以帮助我。

我有以下JS代码，允许用户向地图添加单个或多个标记。

(function add() {
var map, geocoder;

        window.onload = function() {

        var myOptions = {
            zoom: 14,
            center: new google.maps.LatLng(54.312195845815246,-4.45948481875007),
            mapTypeId: google.maps.MapTypeId.SATELLITE,
            mapTypeControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
                position: google.maps.ControlPosition.TOP_RIGHT
            },
            navigationControl: true,
            navigationControlOptions: {
                style: google.maps.NavigationControlStyle.ZOOM_PAN,
                position: google.maps.ControlPosition.TOP_LEFT
            },
            scaleControl: true,
            scaleControlOptions: {
                position: google.maps.ControlPosition.BOTTOM_LEFT
            }
        };

        map = new google.maps.Map(document.getElementById('map'), myOptions);

google.maps.event.addListener(map, 'click', function(event) {
    placeMarker(event.latLng);
  });
}

function placeMarker(location) {
  var clickedLocation = new google.maps.LatLng(location);
  var marker = new google.maps.Marker({
      position: location, 
      map: map
  });

  map.setCenter(location);
}
})();

这是表单的一部分，允许用户添加有关他们创建的标记或标记的更多详细信息，并且HTML代码的缩减版本如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Add</title>
<link rel="stylesheet" href="css/addfindsstyle.css" type="text/css" media="all" />
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
<script type="text/javascript" src="js/addfinds.js"></script>
</head>
<body>
<form name="add" id="add">
<div>
<label for="address">

  <p>&nbsp;</p>
  <p align="left">
    <label>
    <div align="center">Location Name<br />
        <input name="locationname" type="text" id="locationname" />
    </div>
    </label>
  </p>
  <label>Description
  <input name="description" type="text" id="description" />
  <input type="submit" name="Submit" value="Submit" />
  </label>
</div>
</form>
<div id="map"></div>
</body>
</html>

有人可能会告诉我，如何隐藏字段，（在本例中为字段“说明”）和“提交”按钮，直到在地图上创建标记，然后按下提交按钮隐藏字段和按钮，直到创建下一个标记。

非常感谢

克里斯

更新

嗨，非常感谢您的代码。

我必须在这里做一些非常愚蠢的事情，但我已经添加了你建议的代码，但它似乎不起作用。

我已将Javascript行更改为：

google.maps.event.addListener(map, 'click', function(event) {
 $("#add").show(); $("#add").submit(function(event){$(this).hide(); return false;});   
placeMarker(event.latLng);

和CSS：

body {

    font-family: Calibri;
    font-size: 14px;
    width: auto;
    border-left-style: none;
    border-bottom-style: none;
    border-right-style: none;
    border-top-style: none;
    text-align: center;
    border-top-color: #FFFFFF;
    outline-style: none;
    right: auto;
    position: absolute;
    left: auto;
    top: auto;
    bottom: auto;
    visibility: visible;
}
form {
    #add display: none; 
    margin-bottom: 10px;
    clear: both;
    font-size: 14px;
    visibility: visible;
}

#map {
    width: 795px;
    height: 503px;
    border: 1px solid black;
    position: absolute;
    left: 12px;
    top: 215px;
    visibility: visible;
}

或许你能告诉我哪里出错了吗？

非常感谢

克里斯

Answer 1

您最初可以使用CSS隐藏元素：

#add {
    display: none;
}

然后使用JavaScript（示例使用jQuery简洁）来显示/隐藏字段。

内部

google.maps.event.addListener(map, 'click', function(event) {

}

添加：

$("#add").show();
$("#add").submit(function(event){$(this).hide(); return false;});

这是一个jsfiddle示例（虽然非常粗糙，没有样式）http://jsfiddle.net/phKEt/

Google地图单击以显示HTML表单字段

1 个答案: