为此代码添加图片到谷歌地图标记 [英] Adding image to google maps marker for this code

问题描述

我试图在此代码上添加自定义图像到标记，但我不知道如何。我尝试添加新的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 barKlinček< / strong>< br /> Cijena：15kn（Ožujskotočeno）< br /> Adresa：Kušlanova52< / 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 ++; 
 
 
 
 
 $ b初始化（）; 
 
解决方案
我修改了上面发布的代码中的一段代码。  
 
  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循环结束
  
欲了解更多信息，请访问 https://developers.google.com/maps/documentation/ javascript / overlays＃图标 
 
I'm trying to add custom image to marker on this code but I don't know how. I tryed adding new var z and put into image but it's not working. I found more and more codes for similar thing but this looks really easy and I'm quite new in this area do I would like to start with something not that complicated. 

I found this code here: 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++;
    }
}
initialize();
解决方案
I modified a piece of code from your above posted code.
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
For more info https://developers.google.com/maps/documentation/javascript/overlays#Icons

                        
这篇关于为此代码添加图片到谷歌地图标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！