첫 번째 위치에있는 다른 Google지도 마커 방법

나는 대략 100 개의 위치를 가지고 있으며 마커 도구를 배치하는 장소를 사용하여 Google지도의 모든 위치를 계획하고 있습니다. 그러나 첫 번째 위치에 다른 색상 표식을 배치하고 싶습니다.첫 번째 위치에있는 다른 Google지도 마커 방법

어떻게 내 코드에서이 작업을 수행 할 수 있습니까?

첫 번째 위치에 다른 아이콘을 추가하는 방법을 알 수 없습니다.

<!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>

출처

2014-12-03 Monica T

이미 귀하의 질문에 대한 두 가지 대답이, 당신은 몇 가지 피드백을 제공하시기 바랍니다까요? – Kutyel

루프에 대한 귀하의 내부에이 코드를 수정하는 것만큼이나 간단합니다 :

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을 확인합니다.

희망이 도움이되었습니다! 당신은 당신의 for 루프 내에서 첫 번째 마커를 감지 할 수

출처

2014-12-03 08:00:05 Kutyel

,이 시도 :

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());

출처

2014-12-03 08:02:08

첫 번째 위치에있는 다른 Google지도 마커 방법

답변

관련 문제