回到顶部
我的头像

RedSpite

谷歌地图初触电

最近的项目里面用到了谷歌地图,以前开发过百度地图,但是都涉足很浅很浅,虽然这次也只用到了drawingManager下面几个画图组件。 氮素!第一次写了几百行的代码实现出了功能,这样充实的学习过程很令人满足讷。

这次把遇到的几个难点写下来,以后也能温故知新。

marker 与 infoWindow

首先定义一个地图

                    var point = {"lat": 20,"lng": 102};
                    map = new google.maps.Map(document.getElementById('map-canvas'), {
                        zoom: 7,                                    //缩放级别
                        center: point,                              //中心点                  
                        mapTypeId: google.maps.MapTypeId.ROADMAP    //地图类型
                    });
                

创建一个markder标记

                    var myLatlng = new google.maps.LatLng(data.lat, data.lng);  //定义一个marker的经纬度坐标
                    
                    var marker = new google.maps.Marker({                       //创建marker 
                        position: myLatlng,  
                        map: map
                    });  
                    marker.setMap(map);
                

给这个marker加一个点击出现的infoWindow

                    google.maps.event.addListener(marker, "click", function (e) {  
                        var html= '这是一个infoWindow';
                        infoWindow.setContent(_html);  
                        infoWindow.open(map, marker); 
                    });
                

第一个难点:多个marker分别对应不同内容的infoWindow怎么写呢?

答案是如下,假设有给一个markers数组,里面包含了每个marker的经纬度以及它对应的信息。这里用到了一个自运行函数。

                    for (var i in markers) {  
                        //data是当前marker的信息对象
                        var data = markers[i];                                                            
                        var myLatlng = new google.maps.LatLng(data.lat, data.lng);  
                        var marker = new google.maps.Marker({  
                            position: myLatlng,  
                            map: map
                        });  
                        marker.setMap(map);
                        
                        //marker添加点击事件  
                        (function (marker, data) {  
                            google.maps.event.addListener(marker, "click", function (e) {  
                                var _html = '
'+ data.address +" "+ data.time +" "+ data.msg +'
'; infoWindow.setContent(_html); infoWindow.open(map, marker); }); })(marker, data); }

第二个难点:怎样获得当前overlay的各种坐标呢?

答案是需要对overlay监听,drawingManager提供了几个与marker,circle,polygon...等相对应的完成事件监听。 其中overlaycomplete可监听所有类型的完成事件。

                    function setOverlay(obj){
                        //obj可得到当前操作对象
                        var obj = obj.overlay;      //obj是需要操作的对象
                        var type = obj.type;        //type可获取当前操作对象的类型

                        //对marker来说
                        var lat = obj.position.lat();   //获得marker的当前经度坐标
                        var lng = obj.position.lng();   //获取marker的当前纬度坐标
                    }
                    google.maps.event.addListener(drawingManager, 'overlaycomplete', setOverlay);
                

第三个难点:怎样修改当前overlay的各种坐标呢?

如果需要手动修改当前坐标,以marker为例


                     //将修改的 lat,lng重新传入obj即可
                     var myLatlng = new google.maps.LatLng(lat,lng); 
                     obj.setPosition(myLatlng);
                

对于不同overlay有不同的调用方法,只要对当前对象调用对应方法就能设置该对象的不同参数了。

mark一个挺好的API参考网站API之家, 这里面可以找到很全的监听事件以及调用方法。

2016.12.15

© RedSpite | 蜀ICP备16004270号