为此代码添加图像到谷歌地图标记

时间:2013-04-18 12:49:11

标签: image google-maps google-maps-markers

我正在尝试在此代码上添加自定义图像到标记,但我不知道如何。我尝试添加新的var z并放入图像但它不起作用。我发现越来越多的代码用于类似的事情,但这看起来非常简单,我在这个领域很新,我想从不那么复杂的事情开始。

我在这里找到了这段代码:http://stiern.com/tutorials/adding-custom-google-maps-to-your-website/

function initialize() {
        var map_options = {
            center: new google.maps.LatLng(45.813029,15.977895),  <!-- centar mape -->
            zoom: 14,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

    var google_map = new google.maps.Map(document.getElementById("map_canvas"), map_options);

    var info_window = new google.maps.InfoWindow({
        content: 'loading'
    });

    var t = [];
    var x = [];
    var y = [];
    var h = [];

    t.push('Klinček');
    x.push(45.812619);
    y.push(16.007195);
    h.push('<p><strong>Caffe bar Klinček</strong><br/>Cijena: 15kn (Ožujsko točeno)<br/> Adresa: Kušlanova 52</p>');


    var i = 0;
    for ( item in t ) {
        var m = new google.maps.Marker({
            map:       google_map,
            animation: google.maps.Animation.DROP,
            title:     t[i],
            position:  new google.maps.LatLng(x[i],y[i]),
            html:      h[i]

        });

        google.maps.event.addListener(m, 'click', function() {
            info_window.setContent(this.html);
            info_window.open(google_map, this);
        });
        i++;
    }
}

初​​始化();

1 个答案:

答案 0 :(得分:0)

我修改了上面发布的代码中的一段代码。

var i = 0;
var image1 = 'beachflag.png';
var image2 = 'roadflag.png';
var image3 = 'railflag.png';
var image;
for ( item in t ) {

     if(condition1){
      image = image1;
     }
     if(condition2){
      image = image2;
     }
     if(condition3){
      image = image3;
     }
     var m = new google.maps.Marker({
        map:       google_map,
        animation: google.maps.Animation.DROP,
        title:     t[i],
        position:  new google.maps.LatLng(x[i],y[i]),
        html:      h[i],
        icon: image

    });
    .........
}//for loop ends

了解更多信息https://developers.google.com/maps/documentation/javascript/overlays#Icons