javascript - map 上的标记图标颜色也没有显示我想在 map 上添加标题

Question

我正在开发 asp.net MVC 5我已将 Google api v3 map 添加到我的项目中

我为我的标记添加了不同的图标颜色，但它们不可见，只有红色标准图标

下面我已经包含了这个

<script src="http://maps.google.com/maps/api/js?key=MY_KEY"></script>

之后我放置了一个 div

<div id="map" style="width: 320px; height: 350px;margin-top:-400px "></div>

之后我的脚本开始

<script>    
    //Map initialization
// Define your locations: HTML content for the info window, latitude, longitude
var locations =
[
    ['<h4>Meter# 11111111<h4>', 31.27045, 74.17811],
    ['<h4>Meter# 22222222<h4>', 31.26972, 74.17855],
    ['<h4>Meter# 33333333<h4>', 31.27081, 74.17964],
    ['<h4>Meter# 44444444<h4>', 31.27007, 74.18037],
    ['<h4>Meter# 55555555<h4>', 31.26956, 74.18123],
];

// Info Window Content
var infoWindowContent =
[

    //1
    ['<div class="info_content">' +
     '<h4>Meter# 11111111</h4>' +
     '<h4><b>Description</b></h4>'+
     '<p>Accurate Pvt Ltd </br>GSM Energy Meter</p>' +
     '<h4><b>Coordinates:</b></h4>'+
     '<p>31.27045, 74.17811</p>'+ '</div>'
    ],
    //2
    ['<div class="info_content">' +
     '<h4>Meter# 22222222</h4>' +
     '<h4><b>Description</b></h4>' +
     '<p>Accurate Pvt Ltd </br>GSM Energy Meter</p>' +
     '<h4><b>Coordinates:</b></h4s>' +
     '<p>31.26972, 74.17855</p>' + '</div>'
    ],
    //3
    ['<div class="info_content">' +
     '<h4>Meter# 33333333</h4>' +
     '<h4><b>Description</b></h4>' +
     '<p>Accurate Pvt Ltd </br>GSM Energy Meter</p>' +
     '<h4><b>Coordinates:</b></h4>' +
     '<p>31.27081, 74.17964</p>' + '</div>'
    ],
    //4
    ['<div class="info_content">' +
     '<h4>Meter# 44444444</h4>' +
     '<h4><b>Description</b></h4>' +
     '<p>Accurate Pvt Ltd </br>GSM Energy Meter</p>' +
     '<h4><b>Coordinates:</b></h4>' +
     '<p>31.27007, 74.18037</p>' + '</div>'
    ],
     //5
    ['<div class="info_content">' +
     '<h4>Meter# 55555555</h4>' +
     '<h4><b>Description</b></h4>' +
     '<p>Accurate Pvt Ltd </br>GSM Energy Meter</p>' +
     '<h4><b>Coordinates:</b></h4>' +
     '<p>31.26956, 74.18123</p>' + '</div>'
    ],
];



// Setup the different icons and shadows
var iconURLPrefix = 'http://maps.google.com/mapfiles/ms/icons/';

var icons = [
  iconURLPrefix + 'red-dot.png',
  iconURLPrefix + 'green-dot.png',
  iconURLPrefix + 'blue-dot.png',
  iconURLPrefix + 'orange-dot.png',
  //iconURLPrefix + 'purple-dot.png',
  //iconURLPrefix + 'pink-dot.png',
  iconURLPrefix + 'yellow-dot.png'
]

var iconsLength = icons.length;

var map = new google.maps.Map(document.getElementById('map'), {

    zoom: 10,
    center: new google.maps.LatLng(31.27016, 74.17932),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    streetViewControl: false,
    panControl: false,
    zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_BOTTOM
    }
});

var infoWindow = new google.maps.InfoWindow();


var markers = new Array();

var iconCounter = 0;

// Add the markers and infowindows to the map
for (var i = 0; i < locations.length; i++) {  
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        icon: icons[iconCounter]
    });

    markers.push(marker);

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infoWindow.setContent(infoWindowContent[i][0]);
            infoWindow.open(map, marker);
        }
    })(marker, i));

    google.maps.event.addListener(map, "click", function (event) {
        infoWindow.close();
    });

    // We only have a limited number of possible icon colors, so we may have to restart the counter
    if (iconCounter >= iconsLength) {
        iconCounter = 0;
    }
}

function autoCenter() {
    //  Create a new viewpoint bound
    var bounds = new google.maps.LatLngBounds();
    //  Go through each...
    for (var i = 0; i < markers.length; i++) {
        bounds.extend(markers[i].position);
    }
    //  Fit these bounds to the map
    map.fitBounds(bounds);
}
autoCenter();

</script>

我还想给我的 map 一个看起来像 this 的标题

更新

请查看我已在 map 中添加标题

var map = new google.maps.Map(document.getElementById('map'), {

    zoom: 10,
    center: new google.maps.LatLng(31.27016, 74.17932),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false,
    streetViewControl: false,
    panControl: false,
    title: 'Power Monitoring Solutions',
    zoomControlOptions: {
        position: google.maps.ControlPosition.RIGHT_BOTTOM
    }
});

我仍然明白

任何帮助将不胜感激

Answer 1

您忘记增加iconCounter值:-)

所以请更改:

var marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        icon: icons[iconCounter]
    });

进入

var marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        icon: icons[iconCounter]
    });
iconCounter++;

标题

请更改

var locations =
[
    ['<h4>Meter# 11111111<h4>', 31.27045, 74.17811],
    ['<h4>Meter# 22222222<h4>', 31.26972, 74.17855],
    ['<h4>Meter# 33333333<h4>', 31.27081, 74.17964],
    ['<h4>Meter# 44444444<h4>', 31.27007, 74.18037],
    ['<h4>Meter# 55555555<h4>', 31.26956, 74.18123],
];


var marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    icon: icons[iconCounter]
});

进入

var locations =
[
    ['<h4>Meter# 11111111<h4>', 31.27045, 74.17811,'title1'],
    ['<h4>Meter# 22222222<h4>', 31.26972, 74.17855,'title2'],
    ['<h4>Meter# 33333333<h4>', 31.27081, 74.17964,'title3'],
    ['<h4>Meter# 44444444<h4>', 31.27007, 74.18037,'title4'],
    ['<h4>Meter# 55555555<h4>', 31.26956, 74.18123,'title5']
];

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    title:locations[i][3], //title
    icon: icons[iconCounter]
});
iconCounter++;