谷歌地图,为数组和正文添加更多标记

时间:2012-10-26 19:33:02

标签: google-maps-api-3 google-maps-markers

我该如何在此设置中添加其他标记?目前有三个,我一直在搞乱它,但我不知道如何继续添加标记

我一直在尝试使用这个JS Bin http://jsbin.com/agemuw/2/edit,但还没有让它工作

JS:

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
var locations = [
[
"850 Boylston Street",
"Chestnut Hill, MA 02467",
"42.326435",
"-71.149499"
],
[
"Subway Brookline Village",
"Green Line, D",
"42.33279",
"-71.11630"
],
[
"Shuttle Brookline Village",
"10 Brookline Place",
"42.33262",
"-71.116439"
]
];

gmarkers = [];

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

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


function createMarker(latlng, html) {
var marker = new google.maps.Marker({
    position: latlng,
    map: map
});

google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(html);
    infowindow.open(map, marker);
});
return marker;
}

for (var i = 0; i < locations.length; i++) {
/*    alert("location:"+
      locations[i][0]+":"+locations[i][2]+","+locations[i][3]);
*/
gmarkers[locations[i][0]]=
createMarker(new google.maps.LatLng(locations[i][2], locations[i][3]), locations[i][0]    
+ "<br>" + locations[i][1]);
}

/*                                                    
$(function() {
$('#locations h3 a').each(function() { 
    $(this).on('click', function() { 
        google.maps.event.trigger(marker, 'click');    
    })    
  });    
});

*/
});//]]>  

HTML:

<body>      
    <div id="map" style="width: 500px; height: 400px;"></div>

    <div id="locations">
        <h3><a href="javascript:google.maps.event.trigger(gmarkers['850 Boylston  
Street'],'click');">850 Boylston Street</a></h3>
        <p>Arbitrary content about 1</p>

        <h3><a href="javascript:google.maps.event.trigger(gmarkers['Subway Brookline 
Village'],'click');">Brookline Village T Stop</a></h3>
        <p>Arbitrary content about 2</p>

        <h3><a href="javascript:google.maps.event.trigger(gmarkers['Shuttle Brookline 
Village'],'click');">Shuttle - 10 Brookline Place</a></h3>
        <p>Arbitrary content about 3</p>

    </div>

</body>

1 个答案:

答案 0 :(得分:0)

你有一个Javascript错误

在第三个位置后,您在方括号,

之后缺少逗号]
///....snip
"10 Brookline Place",
"42.33262",
"-71.116439"
], //right here
[
"Subway Chestnut Hill",
"Green Line, D",
///...snip

修改

向地图添加自定义标记 添加如下所示的图标属性 - 简单的方法就是只需输入一个网址 - 如果你想定义阴影就会很难,而锚点就是构建一个 - 请参阅Google Maps API以获取更深入的内容

var marker = new google.maps.Marker({
    icon : "http://urlofmymarker.png", //comma is important
    position: latlng,
    map: map
});