Question

我从互联网上搜索了这个教程。我用php找到了一些解决方案。他们说我们可以使用JSON从数据库保存的经度和纬度填充谷歌地图标记。这些教程基于php。我想用JSP做到这一点。我怎样才能做到这一点？有什么建议吗？

谢谢。

Answer 1

大多数Google Map API都适用于JavaScript。 JSP特别值得注意。

首先，您必须了解如何在Google地图上添加单个标记，然后简单地从JSON迭代所有标记细节，创建大量标记并将其添加到Google地图中。

值得阅读Google Map - Markers

上的教程

以下示例代码摘自Google Map Tutorial - Simple markers

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
html,body,#map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
    function initialize() {

        var json = [
                {
                    "title" : "Stockholm",
                    "lat" : 59.3,
                    "lng" : 18.1,
                    "description" : "Stockholm is the capital and the largest city of Sweden and constitutes the most populated urban area in Scandinavia with a population of 2.1 million in the metropolitan area (2010)"
                },
                {
                    "title" : "Oslo",
                    "lat" : 59.9,
                    "lng" : 10.8,
                    "description" : "Oslo is a municipality, and the capital and most populous city of Norway with a metropolitan population of 1,442,318 (as of 2010)."
                },
                {
                    "title" : "Copenhagen",
                    "lat" : 55.7,
                    "lng" : 12.6,
                    "description" : "Copenhagen is the capital of Denmark and its most populous city, with a metropolitan population of 1,931,467 (as of 1 January 2012)."
                } ];

        var myLatlng = new google.maps.LatLng(59.3, 18.1);
        var mapOptions = {
            zoom : 3,
            center : myLatlng
        }
        var map = new google.maps.Map(document.getElementById('map-canvas'),
                mapOptions);

        for ( var i = 0, length = json.length; i < length; i++) {
            var data = json[i], latLng = new google.maps.LatLng(data.lat,
                    data.lng);

            // Creating a marker and putting it on the map
            var marker = new google.maps.Marker({
                position : latLng,
                map : map,
                title : data.title
            });

            marker.setMap(map);
        }

    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
    <div id="map-canvas"></div>
</body>
</html>

快照：

enter image description here

如何使用JSON和JSP填充谷歌地图标记

1 个答案: