javascript - 如何更改谷歌地图标记颜色

Question

这里我正在思考谷歌地图API，从这里有一个数组(位置)，从这个数组我有纬度和经度值，基于这个值我正在创建路线，现在我想做的意味着我想要的凝视点标记显示为绿色，当前起始位置和结束位置均为红色。

var res = {
  "loginType": "logout",
  "status": "success",
  "count": 1,
  "absentCount": 2,
  "startingLat": "12.9817121",
  "startingLng": "77.72649609999996",
  "companyLat": "12.9563031",
  "companyLng": "77.6949695",
  "data": [{
      "empName": "Trisha",
      "pickupTime": "07:45 AM",
      "cabName": "Atios",
      "pickupLatitude": "12.956604",
      "pickupLongitude": "77.696480",
    },
    {
      "empName": "Divya",
      "pickupTime": "08:45 AM",
      "cabName": "Atios",
      "pickupLatitude": "12.956230",
      "pickupLongitude": "77.694997",
    },
    {
      "empName": "Divya",
      "pickupTime": "08:45 AM",
      "cabName": "Atios",
      "pickupLatitude": "12.956230",
      "pickupLongitude": "77.694997",
    }
  ],
  "travlledLocation": [{
      "Travlinglatitude": "12.956664",
      "Travlinglongitude": "77.696829"
    },
    {
      "Travlinglatitude": "12.956604",
      "Travlinglongitude": "77.696480"
    },
    {
      "Travlinglatitude": "12.956523",
      "Travlinglongitude": "77.696021"
    },
    {
      "Travlinglatitude": "12.956413",
      "Travlinglongitude": "77.695380"
    },
    {
      "Travlinglatitude": "12.956335",
      "Travlinglongitude": "77.695029"
    },
    {
      "Travlinglatitude": "12.956230",
      "Travlinglongitude": "77.694997"
    },
    {
      "Travlinglatitude": "12.956107",
      "Travlinglongitude": "77.694994"
    },
    {
      "Travlinglatitude": "12.955934",
      "Travlinglongitude": "77.694970"
    },
    {
      "Travlinglatitude": "12.955639",
      "Travlinglongitude": "77.694932"
    },
    {
      "Travlinglatitude": "12.955380",
      "Travlinglongitude": "77.694902"
    }
  ]
}

var geocoder;
var map;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var locations = res.travlledLocation.map(function(o, i) {
  return [
    i == 0 ? 'Start' : i == res.travlledLocation.length - 1 ? 'End' : i,
    o.Travlinglatitude,
    o.Travlinglongitude,
    i + 1
  ]
});

var waypoints = res.data.map(function(o) {
  return {
    empName: o.empName,
    pickupTime: o.pickupTime,
    lat: o.pickupLatitude,
    lng: o.pickupLongitude
  }
});


function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer({
    suppressMarkers: true
  });


  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    //center: new google.maps.LatLng(-33.92, 151.25), // 
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  directionsDisplay.setMap(map);
  var infowindow = new google.maps.InfoWindow();

  var marker, i;
  var request = {
    travelMode: google.maps.TravelMode.DRIVING
  };
  for (i = 0; i < locations.length; i++) {
    if (locations[i][3] == 1 || locations[i][3] == locations.length) {

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

    google.maps.event.addListener(marker, 'click', (function(marker, infowindow) {
      return function() {
        infowindow.setContent(marker.i);
        infowindow.open(map, marker);
      };
    })(marker, infowindow));

    if (i == 0) request.origin = marker.getPosition();
    else if (i == locations.length - 1) request.destination = marker.getPosition();


  }
  //push the waypoints to request.waypoints array
  waypoints.forEach(function(v, i) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(v.lat, v.lng),
      map: map,
      icon: {
        url: 'http://www.myiconfinder.com/uploads/iconsets/256-256-56165014858e6dbadaf3ba00d782f125.png',
        scaledSize: new google.maps.Size(45, 45)
      },
      data: v
    });
    google.maps.event.addListener(marker, 'click', (function(marker, infowindow) {
      return function() {
        infowindow.setContent('<b>Employee Name : </b>' + marker.data.empName + '<br><b>pickupTime : </b>' + marker.data.pickupTime);
        infowindow.open(map, marker);
      };
    })(marker, infowindow));
  })

  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(result);
    }
  });
}

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

 html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<div id="map"></div>
  <script
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC7lDrYPDmJz1JsQh2rbWA9uRZHcFk_xJY">
    </script>

My Updated code

<form id="formmapping">


<select  name="tripId">
      <option value="gMAcX">gMAcX</option>
      <option value="nQjXB">nQjXB</option>
  </select>

    <button type="submit" class="btn btn-info pull-right" id="btnsubmit">Submit</button>

</form>

<script type="text/javascript">
  $('#btnsubmit').click(function(e){

e.preventDefault();
$.ajax({
   type:'POST',
   url :"getLatLan.php",
   data : $('form#formmapping').serialize(),
    success: function(data) {
       /*if(res['status']=='success'){


       }*/
       var res = {
  "loginType": "logout",
  "status": "success",
  "count": 1,
  "absentCount": 2,
  "startingLat": "12.9817121",
  "startingLng": "77.72649609999996",
  "companyLat": "12.9563031",
  "companyLng": "77.6949695",
  "data": [{
      "empName": "Trisha",
      "pickupTime": "07:45 AM",
      "cabName": "Atios",
      "pickupLatitude": "12.956604",
      "pickupLongitude": "77.696480",
    },
    {
      "empName": "Divya",
      "pickupTime": "08:45 AM",
      "cabName": "Atios",
      "pickupLatitude": "12.956230",
      "pickupLongitude": "77.694997",
    },
    {
      "empName": "Divya",
      "pickupTime": "08:45 AM",
      "cabName": "Atios",
      "pickupLatitude": "12.956230",
      "pickupLongitude": "77.694997",
    }
  ],
  "travlledLocation": [{
      "Travlinglatitude": "12.956664",
      "Travlinglongitude": "77.696829"
    },
    {
      "Travlinglatitude": "12.956604",
      "Travlinglongitude": "77.696480"
    },
    {
      "Travlinglatitude": "12.956523",
      "Travlinglongitude": "77.696021"
    },
    {
      "Travlinglatitude": "12.956413",
      "Travlinglongitude": "77.695380"
    },
    {
      "Travlinglatitude": "12.956335",
      "Travlinglongitude": "77.695029"
    },
    {
      "Travlinglatitude": "12.956230",
      "Travlinglongitude": "77.694997"
    },
    {
      "Travlinglatitude": "12.956107",
      "Travlinglongitude": "77.694994"
    },
    {
      "Travlinglatitude": "12.955934",
      "Travlinglongitude": "77.694970"
    },
    {
      "Travlinglatitude": "12.955639",
      "Travlinglongitude": "77.694932"
    },
    {
      "Travlinglatitude": "12.955380",
      "Travlinglongitude": "77.694902"
    }
  ]
}

var geocoder;
var map;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var locations = res.travlledLocation.map(function(o, i) {
  return [
    i == 0 ? 'Start' : i == res.travlledLocation.length - 1 ? 'End' : i,
    o.Travlinglatitude,
    o.Travlinglongitude,
    i + 1
  ]
});

var waypoints = res.data.map(function(o) {
  return {
    empName: o.empName,
    pickupTime: o.pickupTime,
    lat: o.pickupLatitude,
    lng: o.pickupLongitude
  }
});


function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer({
    suppressMarkers: true
  });


  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    //center: new google.maps.LatLng(-33.92, 151.25), // 
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  directionsDisplay.setMap(map);
  var infowindow = new google.maps.InfoWindow();

  var marker, i;
  var request = {
    travelMode: google.maps.TravelMode.DRIVING
  };
  for (i = 0; i < locations.length; i++) {
    if (locations[i][3] == 1 || locations[i][3] == locations.length) {

      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        i: locations[i][0],


icon: {

url:位置[i][0]=='开始'？' http://www.myiconfinder.com/uploads/iconsets/256-256-8055c322ae4049897caa15e5331940f2.png ':'http://www.myiconfinder.com/uploads/iconsets/256-256-76f453c62108782f0cad9bfc2da1ae9d.png ',scaledSize:位置[i][0]=='开始'？新 google.maps.Size(40, 40) :新 google.maps.Size(45, 45)

        }
      });
    }

    google.maps.event.addListener(marker, 'click', (function(marker, infowindow) {
      return function() {
        infowindow.setContent(marker.i);
        infowindow.open(map, marker);
      };
    })(marker, infowindow));

    if (i == 0) request.origin = marker.getPosition();
    else if (i == locations.length - 1) request.destination = marker.getPosition();


  }
  //push the waypoints to request.waypoints array
  waypoints.forEach(function(v, i) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(v.lat, v.lng),
      map: map,
      icon: {
        url: 'http://www.myiconfinder.com/uploads/iconsets/256-256-56165014858e6dbadaf3ba00d782f125.png',
        scaledSize: new google.maps.Size(45, 45)
      },
      data: v
    });
    google.maps.event.addListener(marker, 'click', (function(marker, infowindow) {
      return function() {
        infowindow.setContent('<b>Employee Name : </b>' + marker.data.empName + '<br><b>pickupTime : </b>' + marker.data.pickupTime);
        infowindow.open(map, marker);
      };
    })(marker, infowindow));
  })

  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(result);
    }
  });
}

google.maps.event.addDomListener(window, "load", initialize);
    }
  });
  });
</script>

Answer 1

您可以在初始化标记时设置图标:

marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        i: locations[i][0],
        icon: i == 0 ? 'http://maps.google.com/mapfiles/ms/icons/green-dot.png' : 'someothericon.png'
      });

其他图标:

http://maps.google.com/mapfiles/ms/icons/blue-dot.png http://maps.google.com/mapfiles/ms/icons/yellow-dot.png http://maps.google.com/mapfiles/ms/icons/red-dot.png http://maps.google.com/mapfiles/ms/icons/orange-dot.png http://maps.google.com/mapfiles/ms/icons/purple-dot.png

当然你也可以制作自己的图标