0

我目前正在尝试使用 Play 开发一个网络应用程序，因此我想集成到目前为止运行良好的谷歌地图。

在这个应用程序中，用户应该能够通过输入地址来添加标记。必须对该地址进行编码以获取 LatLng 值，并且只要用户不删除标记，标记就应该显示在地图上。

我的代码如下所示：

如您所见，我在开头添加了一个示例标记。添加一个新的效果很好。但是当我刷新整个页面时，谷歌地图再次重新加载，只显示示例标记，但不显示新标记。

我的问题：

1) 是否可以让谷歌地图在新标记可用时记住它们？

2) 是否有可能将 LatLng 值作为字符串属性存储在 Play 模型中？这可以帮助我在重新加载地图时重新加载数据库中的所有位置并重新显示所有标记。但似乎不可能在这样的播放语句中运行 codeAdress() 函数：@{Place.store(codeAddress())}。这行不通。

Main.html（每个 html 页面的模板）

<head>
....
<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?key=-mykey-&sensor=false">

</script>
<script src="@{'/public/javascripts/maps.js'}" type="text/javascript"
    charset="${_response_encoding}"></script>
</head>

Maps.js：

function initialize() {

    var latlngCenter = new google.maps.LatLng(12.345, 12.345);
    var latlngExample = new google.maps.LatLng(12.345, 12.345);

    var mapOptions = {
        center : latlngCenter,
        zoom : 12,
        mapTypeId : google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

    var contentString = 'text';

    var infowindow = new google.maps.InfoWindow({
        content : contentString
    });

    var pinColor = "72EC0E";
    var pinImage = new google.maps.MarkerImage(
            "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|"
                    + pinColor, new google.maps.Size(21, 34),
            new google.maps.Point(0, 0), new google.maps.Point(10, 34));
    var pinShadow = new google.maps.MarkerImage(
            "http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
            new google.maps.Size(40, 37), new google.maps.Point(0, 0),
            new google.maps.Point(12, 35));

    var markerExample = new google.maps.Marker({
        position : latlngExample,
        map : map,
        icon : pinImage,
        shadow : pinShadow,
        title : 'Title'
    });

    google.maps.event.addListener(markerExample, 'click', function() {
        infowindow.open(map, markerExample);
    });

    geocoder = new google.maps.Geocoder();

}

function codeAddress(query) {
    var address = query;
    geocoder.geocode({
        'address' : address
    }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map : map,
                position : results[0].geometry.location
            });
            alert("Alert1");
        } else {
            alert("No result");
        }
    });
    return results[0].geometry.location;
}

index.html（从 main 扩展）

#{field 'parking.street'} <label for="street">street</label> <input
            type="text" class="form-control" name="${field.name}" id="address"
            maxlength="50" placeholder="street"> #{/field}
        <button type="button" class="btn btn-success" onclick="codeAddress()">add</button>
        <div id="map_canvas" style="width: 800px; height: 600px;"></div>
4

1 回答 1

0

  1. 您可以将用户添加的所有标记保留在 javascript 数组中。这将允许您跟踪用户为当前页面加载添加的所有标记。因为您跟踪标记，所以如果您愿意，您可以执行诸如从地图中删除标记之类的操作。

  2. 我不熟悉 java 或 play，但如果 java/play 正在呈现您的模板，则调用 javascript 函数codeAddress将不起作用。也许持久化用户添加的标记的最简单方法是创建一个类似的控制器方法/marker/add，并在每次用户添加标记时向该方法发出 ajax 请求。

于 2013-08-03T18:50:45.520 回答