Изменить маркеры по умолчанию для направлений на картах Google - PullRequest
2 голосов
/ 27 июня 2011

Я полный нуб с API Google Maps, и я начал с данного скрипта, который я редактирую, что мне нужно сделать.

В этом случае у меня есть карта с некоторыми точками, взятыми из базы данных. Они такие (после того, как я получу lat / lng из базы данных):

 var route1 =  'from: 37.496764,-5.913379 to: 37.392587,-6.00023'; 
 var route2 = 'from: 37.392587,-6.00023 to: 37.376964,-5.990838'; 
 routes = [route1, route2];

Тогда мой скрипт выполняет следующие действия:

 for(var j = 0; j < routes.length; j++) { 
    callGDirections(j);
      document.getElementById("dbg").innerHTML += "called "+j+"<br>";
} 

А потом направления:

 function callGDirections(num) {
        directionsArray[num] = new GDirections(); 
        GEvent.addListener(directionsArray[num], "load", function() { 
          document.getElementById("dbg").innerHTML += "loaded "+num+"<br>";
          var polyline = directionsArray[num].getPolyline(); 
          polyline.setStrokeStyle({color:colors[num],weight:3,opacity: 0.7}); 
          map.addOverlay(polyline); 
          bounds.extend(polyline.getBounds().getSouthWest());
          bounds.extend(polyline.getBounds().getNorthEast());
                map.setCenter(bounds.getCenter(),map.getBoundsZoomLevel(bounds)); 
          }); 
 // === catch Directions errors ===
 GEvent.addListener(directionsArray[num], "error", function() {
var code = directionsArray[num].getStatus().code;
var reason="Code "+code;
if (reasons[code]) {
  reason = reasons[code]
} 

alert("Failed to obtain directions, "+reason);
  });
        directionsArray[num].load(routes[num], {getPolyline:true}); 
  }

Дело в том, что я хочу поменять маркеры A и B, которые я получаю от Google на карте, на маркеры для каждой из точек, которые я использую (у каждой есть свой значок в базе данных), но я не не знаю как это сделать.

Кроме того, что было бы фантастически, но я не знаю, если это вообще возможно, так это следующее: когда я получаю указания, я получаю что-то вроде этого:

 (a) Street A
 directions
 (b) Street B

А я хочу

 (a) Name of first point
 directions
 (b) Name of second point (also from database)

Я понимаю, что мои знания предмета очень недостаточны, и вопрос может быть немного расплывчатым, но я был бы признателен за любой совет, указывающий мне в правильном направлении.

РЕДАКТИРОВАТЬ: Хорошо, я многому научился на API Google с этой проблемой, но я все еще далек от того, что мне нужно. Я научился скрывать маркеры по умолчанию, выполнив следующее:

 // Hide the route markers when signaled.
GEvent.addListener(directionsArray[num], "addoverlay", hideDirMarkers);
// Not using the directions markers so hide them.
function hideDirMarkers(){
    var numMarkers = directionsArray[num].getNumGeocodes()
    for (var i = 0; i < numMarkers; i++) {
        var marker = directionsArray[num].getMarker(i);
        if (marker != null)
            marker.hide();
        else
            alert("Marker is null");
    }
} 

А теперь, когда я создаю новые маркеры, делаю это:

            var point = new GLatLng(lat,lng);
    var marker = createMarker(point,html);
    map.addOverlay(marker);

Они появляются, но не кликабельны (всплывающее окно с html не будет отображаться)

Ответы [ 4 ]

2 голосов
/ 17 января 2012

У меня также была проблема с маркерами в выходных данных. Не было никакого способа заменить маркеры без каких-либо чрезвычайно громоздких js, которые должны были включать обходные пути для пошаговых указаний и т. Д.

Простой способ сделать это - css:

Строка A - это таблица:

<table id="adp-placemark" class="adp-placemark" jstcache="0">

и линия B:

<table class="adp-placemark" jstcache="0">

Таким образом, следующий css изменит маркеры:

#adp-placemark img, .adp-placemark img {
   display:none;
}
#adp-placemark {
   font-weight: bold;
   padding: 10px 10px 10px 30px;
   background: white url(../images/map_icons/number_1.png) no-repeat left center;
}
.adp-placemark {
   font-weight: bold;
   padding: 10px 10px 10px 30px;
   background: white url(../images/map_icons/number_2.png) no-repeat left center;
}
2 голосов
/ 20 марта 2012

У меня уже было два маркера, потому что я сначала использовал обнаружение. Чтобы скрыть новые маркеры «A» и «B», я использовал

google.maps.DirectionsRenderer({suppressMarkers: true});
1 голос
/ 28 июня 2011

В соответствии с Документом Google Maps API для GDirections вы сможете позвонить getMarker , чтобы получить маркер для начальной и конечной точек, а затем изменить изображение с помощью setImage метод на GMarker :

directionsArray[num].getMarker(0).setImage('IMAGE URL');

У меня нет настроек Google Maps для проверки этого, но он должен изменить изображение для маркера начала, и если вы измените индекс с 0 на последний маркер, вы сможете изменить последнее изображение. Надеюсь, это поможет!

Ссылка: NetManiac - Изменение значков маркеров с помощью Google Maps API

0 голосов
/ 28 декабря 2012

Изменить два маркера по умолчанию на направление. Код для гугл карт api v3.

    mapOptions = 
    center: new google.maps.LatLng(50.075538,14.437801),
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP

map = new google.maps.Map($(".map_canvas").get(0), mapOptions)

directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer(suppressMarkers: true);
directionsDisplay.setMap(map);

request = 
    origin: $(".map_canvas").data('coords'),
    destination: '50.087349, 14.420756',
    travelMode: google.maps.TravelMode.DRIVING

directionsService.route request, (result, status) ->
    if status == google.maps.DirectionsStatus.OK
        directionsDisplay.setDirections(result)
        showSteps(result)

showSteps = (result) ->
    myRoute = result.routes[0].legs[0];

    new google.maps.Marker
        position: myRoute.steps[0].start_point,
        icon: 'http://maps.gstatic.com/intl/en_ALL/mapfiles/ms/micons/homegardenbusiness.png',
        map: map

    new google.maps.Marker
        position: myRoute.steps[myRoute.steps.length-1].start_point,
        map: map
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...