代码如下:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery/1.9.1/jquery.min.js"></script>
<script
src="https://maps.googleapis.com/maps/api/js?key=YOURKEY&language=en-US&v=3.26&sensor=false">
</script>
</head>
<body>
<div id="container">
<div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div>
</div>
<script type="text/javascript">
var myCenter=new google.maps.LatLng(39.67265743179042,116.53268392603445);
//var myCenter1=new google.maps.LatLng(50.508742,-1.120850);
//var t = '<?php echo $google_controller_data;?>';
//var points=eval("("+ t +")");
var points = [
{"lng":116,"lat":40,"url":"http://www.baidu.com","id":50,"name":"p1"},
{"lng":117,"lat":31,"url":"http://www.taobao.com","id":2,"name":"p2"},
{"lng":116,"lat":34,"url":"http://www.qq.com","id":3,"name":"p3"}
];
function initialize()
{
var mapProp = {
center:myCenter,
zoom:8,
streetViewControl:true,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("map"),mapProp);
pointsLen = points.length;
var google_points=[];
var marker;
for(var i = 0,pointsLen = points.length;i <pointsLen;i++)
{
//定义icon图标
var iconstr;
if(points[i].onlineflag == 1){
iconstr = "<?php echo SYS_UI_URL;?>images/icon.png"
}
google_points[i] = new google.maps.LatLng(points[i].lat,points[i].lng);
marker=new google.maps.Marker({
position:google_points[i],//显示位置
//animation:google.maps.Animation.BOUNCE,//动态
map:map,
icon:iconstr//换图片
});
var googlecontent = showInfo(points[i]);
// var googlecontent = "<div>地址:aaaaa"+i+"</div>";
clickMarker(marker,googlecontent);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
function clickMarker(marker,googlecontent){
google.maps.event.addListener(marker,'click',function(){
var infowindow = new google.maps.InfoWindow();
infowindow.setContent(googlecontent);
infowindow.open(map,marker);
});
}
//显示信息窗口,显示标注点的信息。
function showInfo(point){
var sContent =
'<ul class="info_ul">'
+'<li class="info_li">'
+'<span class="info_span">id:</span>' + point.id + '</li>'
+'<li class="info_li">'
+'<span class="info_span">名称:</span>' + point.name + '</li>';
+'</ul>';
return sContent;
}
</script>
</body>
</html>
开发过程遇到的问题:
1、循环显示标注的时候总是显示最后一个:解决方法:不要把click事件放到循环里面去,需要单独拿出来写个如上代码的clickMarker函数