Google地图多个自定义标记 [英] Google Maps Multiple Custom Markers

问题描述

所以我试图学习如何制作谷歌地图。我对JavaScript的理解很少，但我正在努力学习。

我在网上引用了一个代码，并且我明白了如何添加位置，标记和infowindow，但我试图找出如何为每个标记添加多个自定义图标。

感谢您的帮助。

 函数初始化（）{
 
 //添加地图，地图类型
 var map = new google.maps .Map（document.getElementById（'map'），{
 zoom：6，
 center：new google.maps.LatLng（37.7749295，-122.4194155），
 mapTypeId：google.maps。 MapTypeId.ROADMAP 
}）; 
 
 //添加地点
 var locations = [
 ['San Francisco：Power Outage'，37.7749295，-122.4194155]，
 ['Sausalito'，37.8590937， -122.4852507]，
 ['Sacramento'，38.5815719，-121.4943996]，
 ['Soledad'，36.424687，-121.3263187]，
 ['Shingletown'，40.4923784，-121.8891586] 
]; 
 
 // declare marker call'i'
 var marker，i; 
 
 // declare infowindow 
 var infowindow = new google.maps.InfoWindow（）; 
 
 //将标记添加到每个位置
（i = 0; i< locations.length; i ++）{
 marker = new google.maps.Marker（{ b $ b位置：new google.maps.LatLng（位置[i] [1]，位置[i] [2]），
 map：map，
}）; 
 
 //点击功能标记，弹出infowindow 
 google.maps.event.addListener（marker，'click'，（function（marker，i）{
 return function （）{
 infowindow.setContent（locations [i] [0]）; 
 infowindow.open（map，marker）; 
} 
}）（marker，i）） ; 
} 
} 
 google.maps.event.addDomListener（window，'load'，initialize）; 
  

解决方案

有多种方法，最简单的就是设置标记的图标属性添加到要作为标记显示的图片的网址。

示例：

  //修改了带有图标网址的数组
 var locations = [
 ['San Francisco：Power Outage'，37.7749295，-122.4194155，'http：// labs .google.com / ridefinder / images / mm_20_purple.png']，
 ['Sausalito'，37.8590937，-122.4852507，'http：//labs.google.com/ridefinder/images/mm_20_red.png']， 
 ['Sacramento'，38.5815719，-121.4943996，'http：//labs.google.com/ridefinder/images/mm_20_green.png']，
 ['Soledad'，36.424687，-121.3263187，'' http://labs.google.com/ridefinder/images/mm_20_blue.png']，
 ['Shingletown'，40.4923784，-121.8891586，'http：//labs.google.com/ridefinder/images/mm_20_yellow .png'] 
]; 
 
 
 
 //循环内
 marker = new google.maps.Marker（{
 position：new google.maps.LatLng（locations [ i] [1]，locations [i] [2]），
 map：map，
 icon：locations [i] [3] 
}）; 
  

So I'm trying to learn how to make a google map. I have very little understanding of javascript but am trying to learn here.

I referenced a code online and I got to the point where I sort of understand how to add locations, marker, and a infowindow but I'm trying to figure out how to add multiple custom icons for each marker.

Thanks for the help.

function initialize() {

        //add map, the type of map
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 6,
            center: new google.maps.LatLng(37.7749295, -122.4194155),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        //add locations
        var locations = [
            ['San Francisco: Power Outage', 37.7749295, -122.4194155],
            ['Sausalito', 37.8590937, -122.4852507],
            ['Sacramento', 38.5815719, -121.4943996],
            ['Soledad', 36.424687, -121.3263187],
            ['Shingletown', 40.4923784, -121.8891586]
        ];

        //declare marker call it 'i'
        var marker, i;

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

        //add marker to each locations
        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,
            });

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

解决方案

There are multiple ways, the easiest is to set the icon-property of the marker to a URL of an image you want to appear as marker.

sample:

//modified array with icon-URLs
var locations = [
            ['San Francisco: Power Outage', 37.7749295, -122.4194155,'http://labs.google.com/ridefinder/images/mm_20_purple.png'],
            ['Sausalito', 37.8590937, -122.4852507,'http://labs.google.com/ridefinder/images/mm_20_red.png'],
            ['Sacramento', 38.5815719, -121.4943996,'http://labs.google.com/ridefinder/images/mm_20_green.png'],
            ['Soledad', 36.424687, -121.3263187,'http://labs.google.com/ridefinder/images/mm_20_blue.png'],
            ['Shingletown', 40.4923784, -121.8891586,'http://labs.google.com/ridefinder/images/mm_20_yellow.png']
        ];



//inside the loop
marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                map: map,
                icon: locations[i][3]
            });

这篇关于Google地图多个自定义标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！