Google Maps Api V3, как создавать различные значки маркеров (не используется xml)

google-maps

89 просмотра

1 ответ

Мы берем данные из базы данных MySQL, чтобы создать карту Google, которая содержит около 150 маркеров. Сценарий довольно старый. Несколько лет назад мы выбрали не-xml решение. Хотя это может быть и не идеально, но работает довольно хорошо. У нас есть три типа локаций, и мы хотели бы использовать для этого разные значки маркеров. Я не уверен, как это сделать. Вот сценарий:

var icon = new google.maps.MarkerImage("/icons/mm_20_red.png",
new google.maps.Size(32, 32), new google.maps.Point(0, 0),
new google.maps.Point(16, 32));
var center = null;
var title = "Für mehr Infos bitte klicken!";
var map = null;
var currentPopup;
var bounds = new google.maps.LatLngBounds();

function addMarker(lat, lng, info, type) {
    var pt = new google.maps.LatLng(lat, lng);
    bounds.extend(pt);
    var marker = new google.maps.Marker({
        position: pt,
        icon: icon,
        map: map,
        title: title
    });
    var popup = new google.maps.InfoWindow({
        content: info
    });
    google.maps.event.addListener(marker, "click", function() {
        if (currentPopup != null) {
            currentPopup.close();
            currentPopup = null;
        }
        popup.open(map, marker);
        currentPopup = popup;
    });
    google.maps.event.addListener(popup, "closeclick", function() {
        currentPopup = null;
    });
}

function initMap() {
    map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(50.607685, 10.688126),
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
        },
        navigationControl: true,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.LARGE
        }
    });

    <?
    $query = mysql_query("SELECT * FROM markers");
    while ($row = mysql_fetch_array($query)) {
        $name = $row['name'];
        $vorname = $row['vorname'];
        $lat = $row['lat'];
        $lon = $row['lng'];
        $address = $row['address'];
        $strasse = $row['strasse'];
        $plz = $row['plz'];
        $ort = $row['ort'];
        $telephone = $row['telephone'];
        $email = $row['email'];
        $image = $row['image'];
        $type = $row['type'];
        if ($row['image'] != "") {
            echo("addMarker($lat, $lon,'<img style=\"float:left; margin: 0px 5px 0px 0px\" src=\"$image\" width=\"80\" height=\"80\" /><b>$name, $vorname ($type)&nbsp;&nbsp;</b><br/>$strasse<br/>$plz&nbsp;$ort<br/>$telephone<br/><a href=\"mailto:$email\">$email</a>');");
        } else
            echo("addMarker($lat, $lon,'<b>$name, $vorname ($type)&nbsp;&nbsp;</b><br/>$strasse<br/>$plz&nbsp;$ort<br/>$telephone<br/><a href=\"mailto:$email\">$email</a>');");
    } 
   ?>
}

Итак, мы выбираем все данные в БД и выводим их. Если есть изображение, мы показываем это во всплывающем окне. Если нет, мы пропустим это. У нас есть еще один столбец «тип». Мы хотели бы использовать разные маркеры для этого типа. Скажем, красный для типа A, синий для типа B и зеленый для типа C. Как мы можем это сделать?

Спасибо!

Автор: user2516117 Источник Размещён: 08.11.2019 10:55

Ответы (1)


0 плюса

Вы можете выбрать цвет значка в зависимости от типа и использовать изображение этого цвета в качестве значка маркера.

function addMarker(lat, lng, info, type) {
    var pt = new google.maps.LatLng(lat, lng);
    bounds.extend(pt);

//  Added code starts here
    var color = "black";
    if(type == "A")
    {
       color = "red";
    }
    else if(type == "B")
    {
       color = "blue";
    }
    else if(type == "C")
    {
       color = "green";
    }
    var imageicon  = "http://maps.google.com/mapfiles/ms/icons/" + color + ".png";
//  Added code ends here

    var marker = new google.maps.Marker({
        position: pt,
        icon: imageicon, //replace icon with imageicon
        map: map,
        title: title
    });
    var popup = new google.maps.InfoWindow({
        content: info
    });
    google.maps.event.addListener(marker, "click", function() {
        if (currentPopup != null) {
            currentPopup.close();
            currentPopup = null;
        }
        popup.open(map, marker);
        currentPopup = popup;
    });
    google.maps.event.addListener(popup, "closeclick", function() {
        currentPopup = null;
    });
}
Автор: Joyson Размещён: 20.08.2016 05:56
Вопросы из категории :
32x32