Question

以下代码在Oracle APEX应用程序的 HTML 区域中正确呈现Google地图。但是所有地图位置都具有相同的标记图标。如何使'Flat Rock'的标记与其他3个标记不同？

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 = [
    ['Flat Rock', 43.649099,-71.327217,'#APP_IMAGES#darkgreen_MarkerF.png'],
    ['19-Mile Bay', 43.647613, -71.278181],
    ['Little Bear Island', 43.641296, -71.323596],
    ['Trexlers Marina', 43.667654, -71.349013]
];

    // Info Window Content
    var infoWindowContent = [
        ['<div class="info_content">' +
        '<h3>Flat Rock</h3>' +
        '<p>Flat Rock of Wellswood is located on East Point of Long Island, Lake Winnipesaukee.</p>' +        '</div>'],
        ['<div class="info_content">' +
        '<h3>19-Mile Bay</h3>' +
        '<p>19-Mile Bay docks and store.  A great place to fill up your boat gas tank and cool off with some fresh ice cream!</p>' +
        '</div>'], 
        ['<div class="info_content">' +
        '<h3>Little Bear Island</h3>' +
        '<p>Off its western and southern shores are great fishing spots for salmon in the early spring.</p>' + 
        '</div>']
        ['<div class="info_content">' +
        '<h3>Trexlers Marina</h3>' +
        '<p>Boat rentals and gas.</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],
        icon: markers[i][3]
    });

        // 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(13);
        google.maps.event.removeListener(boundsListener);
    });
}

Answer 1

在标记数组中添加图像名称：

  var markers = [
        ['Flat Rock', 43.649099,-71.327217,'img1.png'],
        ['19-Mile Bay', 43.647613, -71.278181,'img2.png'],
        ['Little Bear Island', 43.641296, -71.323596,'img3.png'],
        ['Trexlers Marina', 43.667654, -71.349013,'img4.png']

和

marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0],
            icon: 'url_for_images/' + markers[i][3]
        });

请参阅https://developers.google.com/maps/documentation/javascript/markers#icons

多个谷歌地图标记

1 个答案: