Question

我是谷歌地图的新手，我试图让我的搜索页面上返回的所有位置显示在相应的地图上，但我无法使其正常工作。我有每个列表显示其列表的经度和纬度，我使用下面的代码。有人可以帮我解决这个问题吗？它必须是我想念的简单事物。谢谢！

jQuery(function($) {
    // Asynchronously Load the map API 
    var script = document.createElement('script');
    script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
    document.body.appendChild(script);
});

function initialize() {
    var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap'
    };

    // Display a map on the page
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    map.setTilt(45);

    // Multiple Markers

    var markers = [];
     $(".eventCoordinates").each(function() {
        var myLocation = $(this).html();
        markers.push(myLocation);

    });

    // Info Window Content
    var infoWindowContent = [
        ['<div class="info_content">' +
        '<h3>London Eye</h3>' +
        '<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>' +        '</div>'],
        ['<div class="info_content">' +
        '<h3>Palace of Westminster</h3>' +
        '<p>The Palace of Westminster is the meeting place of the House of Commons and the House of Lords, the two houses of the Parliament of the United Kingdom. Commonly known as the Houses of Parliament after its tenants.</p>' +
        '</div>']
    ];

    // Display multiple markers on a map
    var infoWindow = new google.maps.InfoWindow(), marker, i;

    // Loop through our array of markers & place each one on the map  
    for( i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0]
        });

        // Allow each marker to have an info window    
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));

        // Automatically center the map fitting all markers on the screen
        map.fitBounds(bounds);
    }

    // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
        this.setZoom(14);
        google.maps.event.removeListener(boundsListener);
    });

}

 </script>           

            <div id="map_wrapper">
    <div id="map_canvas" class="mapping"></div>
</div>

<div class="event">

<div class="eventCoordinates">51.503454,-0.119562</div>

</div>

<div class="event">

<div class="eventCoordinates">51.499633,-0.124755</div>

</div>

Answer 1

这是一个有效的例子：

jQuery(function ($) {
    // Asynchronously Load the map API 
    var script = document.createElement('script');
    script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
    document.body.appendChild(script);
});

function initialize() {
    var map;
    var bounds = new google.maps.LatLngBounds();
    var mapOptions = {
        mapTypeId: 'roadmap'
    };

    // Display a map on the page
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    map.setTilt(45);

    // Multiple Markers
    var markers = [];
    $(".eventCoordinates").each(function () {
        var myLocation = $(this).html().split(',');
        markers.push(['Marker',parseFloat(myLocation[0]),parseFloat(myLocation[1])]);
    });

    // Info Window Content
    var infoWindowContent = [
        ['<div class="info_content">' +
        '<h3>London Eye</h3>' +
        '<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>' + '</div>'],
        ['<div class="info_content">' +
        '<h3>Palace of Westminster</h3>' +
        '<p>The Palace of Westminster is the meeting place of the House of Commons and the House of Lords, the two houses of the Parliament of the United Kingdom. Commonly known as the Houses of Parliament after its tenants.</p>' +
        '</div>']
    ];

    // Display multiple markers on a map
    var infoWindow = new google.maps.InfoWindow(), marker, i;

    // Loop through our array of markers & place each one on the map  
    for (i = 0; i < markers.length; i++) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0]
        });

        // Allow each marker to have an info window    
        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));

        // Automatically center the map fitting all markers on the screen
        map.fitBounds(bounds);
    }

    // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
   var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function (event) {
        this.setZoom(14);
        google.maps.event.removeListener(boundsListener);
    });

}

.mapping {
            height: 480px;
            width: 640px;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<div id="map_wrapper">
    <div id="map_canvas" class="mapping"></div>
 </div>
 <div class="event">
        <div class="eventCoordinates">51.503454,-0.119562</div>
</div>
<div class="event">
        <div class="eventCoordinates">51.499633,-0.124755</div>
</div>

与您的示例相比，只有一个变化，关于如何从div元素中提取标记信息：

$(".eventCoordinates").each(function() {
    var myLocation = $(this).html();
    markers.push(myLocation);
});

替换为：

$(".eventCoordinates").each(function () {
    var myLocation = $(this).html().split(',');
    markers.push(['Marker',parseFloat(myLocation[0]),parseFloat(myLocation[1])]);
});

Answer 2

要从html中获取数据，您需要将html转换为数字数组。

尝试：

$(".eventCoordinates").each(function() {
        // create array of strings
        var myLocation = $(this).html().split(',');
        // convert strings to number
        myLocation[0] = + myLocation[0];
        myLocation[1] = + myLocation[1];
        markers.push(myLocation);
});

谷歌地图 - 在地图上动态生成标记

2 个答案: