google 地图api开发循环多叠加层标记实例（二）

最新推荐文章于 2021-12-08 18:28:41 发布

jacklin_001

最新推荐文章于 2021-12-08 18:28:41 发布

阅读量547

点赞数

分类专栏： google 地图

本文链接：https://blog.csdn.net/weixin_43025071/article/details/95218292

版权

google 地图专栏收录该内容

5 篇文章 0 订阅

订阅专栏

代码如下：

<!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函数

jacklin_001

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
google 地图api开发循环多叠加层标记实例（二）

代码如下：<!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/j...
复制链接

扫一扫

专栏目录