如何在第一个位置放置不同的谷歌地图标记答案

【问题标题】：how to a place different google map marker on the first location如何在第一个位置放置不同的谷歌地图标记
【发布时间】：2014-12-03 07:31:08
【问题描述】：

我有大约 100 个位置，我正在尝试使用放置标记工具在谷歌地图上绘制所有位置。但是我想在第一个位置放置一个不同的颜色标记。

如何在下面的代码中实现这一点？

我无法想办法将不同的标记添加到第一个位置。

<!DOCTYPE html>
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
    <title>Google Maps Sensor  Markers</title> 
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head> 
<body>
<div id="map" style="width: 1000px; height: 700px;"></div>
<script type="text/javascript">
   var myVar = <% -JSON.stringify(jsresult) %> ;
   var count = <% -rowcount %>
   var sensor = [],
       time = [];
   console.log('Result ' + myVar);
   //var markerBounds = new google.maps.LatLngBounds();
   var sortResults = function (sensor, time) {
       var locations = [

           ['1', 21.390488, 39.720039, 0],
           ['2', 21.384861, 39.793586, 1],
           ['3', 21.360205, 39.768940, 2],

           // more here//    

           ['97', 21.338759, 43.965311, 97],
           ['98', 21.377342, 43.860941, 98],
           ['99', 21.353349, 43.762236, 99],
           ['100', 21.309632, 43.994229, 100]
       ];
       var map = new google.maps.Map(document.getElementById('map'), {
           //zoom: 10,
           center: new google.maps.LatLng(21.414011, 39.895322),
           mapTypeId: google.maps.MapTypeId.ROADMAP
       });
       var infowindow = new google.maps.InfoWindow();

       var marker, i;
       var path = [];
       var latlngbounds = new google.maps.LatLngBounds();
       for (i = 0; i < sensor.length; i++) {
           var chosenLocation = sensor[i];

           var mylatlang = new google.maps.LatLng(locations[chosenLocation][1], locations[chosenLocation][2]);
           marker = new google.maps.Marker({
               position: mylatlang,
               map: map
           });
           google.maps.event.addListener(marker, 'click', (function (marker, i) {
               return function () {
                   infowindow.setContent(sensor[i][0]);
                   infowindow.open(map, marker);
               }
           })(marker, i));
           latlngbounds.extend(mylatlang);
           path[i] = new google.maps.LatLng(locations[chosenLocation][1], locations[chosenLocation][2]);
           //markerBounds.extend(mylatlang);
           zoomToMarkers();

       }

       function zoomToMarkers() {
           map.setCenter(latlngbounds.getCenter());
           map.fitBounds(latlngbounds);
       }

       var flightPath = new google.maps.Polyline({
           path: path,
           geodesic: true,
           strokeColor: '#FF0000',
           strokeOpacity: 1.0,
           strokeWeight: 2
       });
       flightPath.setMap(map);
   }

   for (var j = 0; j < count; j++) {
       sensor[j] = myVar.rows[j].sensor;
       time[j] = myVar.rows[j].time;
   }
   sortResults(sensor, time);
   //map.fitBounds(markerBounds);
</script>
</body>
</html>

【问题讨论】：

标签： javascript html css google-maps google-maps-api-3

【解决方案1】：

您可以在 for 循环中检测到第一个标记，试试这个：

var map, marker, i;
var mapData = [
    ["İstanbul Avrupa", 41.128273, 28.541141, 'Marker Text A'],
    ["İstanbul Anadolu", 40.906535, 29.466739, 'Marker Text B'],
    ...
];

function initialize() {
    var myOptions = {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true
    };
    map = new google.maps.Map(document.getElementById("map-canvas"),myOptions);
    var infowindow = new google.maps.InfoWindow();
    var bounds = new google.maps.LatLngBounds();

    var markerIcon;
    for (i = 0; i < mapData.length; i++) {
        var pos = new google.maps.LatLng(mapData[i][1], mapData[i][2]);
        bounds.extend(pos);

        // Detect first marker on here
        if ( i == 0 ) {
            markerIcon = 'firstIcon.png';
        }else{
            markerIcon = 'generalIcon.png';
        }
        marker = new google.maps.Marker({
            icon: markerIcon,
            position: pos,
            map: map
        });

        /*
        // or use custom marker which you can create markers with html/css
        // and write text in it which came from array
        // https://googlemaps.github.io/js-rich-marker/reference.html
        marker = new RichMarker({
            position: pos,
            map: map,
            setShadow: function() {
                shadow: 'none'
            },
            content: '<div class="map-marker" data-city="'+ mapData[i][0] +'" title="'+ mapData[i][0] +' is the current city.">'+ mapData[i][3] +'</div>'
        });
        */

        /*
        // info window if you need so (:
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
             return function() {
                map.panTo(this.getPosition());//map center to clicked marker
                var $infoButton = '<div class="map-marker-info">'+mapData[i][0]+'</div>';
                infowindow.setContent($infoButton);
                infowindow.open(map, marker);
             }
        })(marker, i));
        */

    }

    map.fitBounds(bounds);
}


google.maps.event.addDomListener(window, 'load', initialize());

【讨论】：

【解决方案2】：

就像在 for 循环中修改此代码一样简单：

var blueMarker = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png';
var regularMarker = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png'

marker = new google.maps.Marker({
    image: i == 0 ? blueMarker : regularMarker,
    position: mylatlang,
    map: map
});

// after that add the marker just as before

检查Google Maps API Documentation，检查标记创建参数等等。

希望有所帮助！

【讨论】：