Google Maps API V3 и результаты и маркеры Javascript

РЕДАКТИРОВАТЬ: В основном, как локатор магазинов ASDA

У меня есть локатор магазинов, когда вы вводите свой почтовый индекс, и он показывает 3 магазина, которые находятся рядом с вами. От этого на карте появляются 3 маркера для каждой локации. Данные извлекаются из базы данных MYSQL, и именно там хранятся широта и долгота. Мне нужно, чтобы результаты были пронумерованы, скажем, 1, 2 и 3, и другой маркер с номерами 1, 2 и 3, чтобы они знали, какое хранилище результатов относится к какому маркеру. Я знаю, как создавать маркеры, но я не уверен, как это применить. Вот мой код, который я использовал для отображения результатов и отображения маркеров на карте:

PHP

<?php which displays the results down the side of the map..
        if(isset($stores)){
            foreach($stores as $store){ ?>

            <div class="stores">
            <p class="name"><?php echo $store['name']; ?></p>
            <p class="address"><?php echo $store['address']; ?></p>
            <p class="address"><?php echo $store['postcode']; ?></p> 
            </div>

            <php number_format($store['distance'],2) ?> miles   

       <?php
          }
        }
        ?>

Чтобы получить маркеры для каждого результата на карте, я, очевидно, использовал javascript:

function initialize() {

    var locations = [];     
    <?php
    $count = 0;
    foreach($stores as $store){
        ?>
        locations.push(['<?php echo $store['name'] ?>','<?php echo $store['lat'] ?>','<?php echo $store['lng'] ?>','<?php echo $count++; ?>']);
        <?php           
    }
    ?>

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 5,
        center: new google.maps.LatLng(55.136319, -2.504183),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

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

    var marker, i;

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

    google.maps.event.addListener(marker, 'click', (function() {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
    })(marker, i));
}
google.maps.event.addDomListener(window, 'load', initialize);

Это отображает маркер по умолчанию, но если бы я должен был объявить каждый маркер изображением или цветом, как мне применить его к результатам массива для каждого результата? Любое руководство будет оценено.


google-maps javascript arrays google-maps-markers
person user2212564    schedule 06.06.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Маркеры имеют свойство icon, где можно изменить используемое изображение. Я бы рекомендовал иметь значок маркера для каждого местоположения с индексом в названии (например, marker0.png, marker1.png, marker2.png). Затем установите значок при создании маркера.

У Google есть разные, которые вы можете получить, но URL-адреса не так легко найти все время. Вот сайт со списком некоторых из них: http://jg.org/mapping/icons.html

  for (i = 0; i < locations.length; i++) {  
        marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        icon: "url/to/the/marker/marker" + i + ".png",
        map: map
      });
    }
person Bryan Weaver    schedule 06.06.2013
comment
Ну это как раз то, что я искал! У меня был собственный маркер, и, упаси бог, все, что мне нужно было сделать, это создать эту линию, используя метод значков - большое спасибо: D. - person user2212564; 06.06.2013

arrow_upward
1
arrow_downward

Я сделал это некоторое время назад со следующим подходом. Когда я объявил свой маркер, я использовал.

var marker = createMarker(map,point,label,html,rank,type);

потом

function createMarker(map, latlng, title, html, rank,type) {
   var image = new google.maps.MarkerImage("images/goldPin.png",
    // This marker is 24 pixels wide by 37 pixels tall.
    new google.maps.Size(24, 37),
    // The origin for this image is 0,0.
    new google.maps.Point(0,0),
    // The anchor for this image is the base of the flagpole at 0,37.
    new google.maps.Point(15, 20)); 

    var shadow = new google.maps.MarkerImage('images/goldPinShadow.png',
    // The shadow image is larger in the horizontal dimension
    // while the position and offset are the same as for the main image.
    new google.maps.Size(31, 37),
    new google.maps.Point(0,0),
    new google.maps.Point(15, 20));
    // Shapes define the clickable region of the icon.
    // The type defines an HTML <area> element 'poly' which
    // traces out a polygon as a series of X,Y points. The final
    // coordinate closes the poly by connecting to the first
    // coordinate.  

    var shape = {
        coord: [1, 1, 1, 20, 18, 20, 18 , 1],
        type: 'poly'
    };

    switch (type) {
        case "general":
            var markerOptions = {
            title: title,
            shadow: shadow,
            icon: image,
            shape: shape,
            position: latlng,
            map: map
        }
        break;
        /*
        more types go here
        */      
}

var marker = new google.maps.Marker(markerOptions);

google.maps.event.addListener(marker, "click", function() {
    var infowindowOptions = {
      content: html
    }
    var infowindow = new google.maps.InfoWindow(infowindowOptions);
        setInfowindow(infowindow);
        infowindow.open(map, marker);
});

google.maps.event.addListener(marker, "mouseover", function() {

});
google.maps.event.addListener(marker, "mouseout", function() {

});

    return marker;
}

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

person AJames    schedule 06.06.2013
comment
Эй, спасибо за это. я посмотрел на этот пример ранее сегодня и кажется очень удобным. К счастью, приведенный выше фрагмент кода работает для меня проще, так как я уже использовал макет, и его легче внедрить в мою сборку. Спасибо за вашу помощь, и я сохраню это, чтобы использовать в будущем! - person user2212564; 06.06.2013