• Google map v3 using simple tool file google.map.util.js v 1.0


    /**
     * GOOGLE地图开发使用工具
     * @author BOONYACHENGDU@GMAIL.COM
     * @date 2013-08-23
     * @notice 地图容器的(div)z-index不能小于(lt)0,否则鼠标地图无法进行地图操作(可以看到地图,不过你会万分苦恼(you will be Extremely distressed))
     */
    (function(){
        window.map={};
        window.lineFeature=null;
        window.markers=[];
        window.infoWindow=null;
        window.GoogleUtil={};
        GoogleUtil={
            CONSTANT:{
                mapkey:'AIzaSyAY-HsXXPsBUqsbQLDFO8kpNWLANwH0E7k',
                container:"map",
                DEFAULT_ZOOM:12,
                zoomAddFeature:19,
                centerLat:30.65721817,
                centerLng:104.06594494,
                mapstatus:false,
                isnewMap:false,
                ZOOM_MAX:19,
                ZOOM_MIN:1,
                markerSize:32
            },
            /**
             * 控制地图显示范围为中国
             */
            mapShowBounds:function(){
                var strictBounds = new google.maps.LatLngBounds(
                    new google.maps.LatLng(14.48003790418668, 66.28120434863283),
                    new google.maps.LatLng(54.44617552862156, 143.71284497363283)
                );
                google.maps.event.addListener(map, 'dragend',function() {
                    if (strictBounds.contains(map.getCenter())) return;
                    var c = map.getCenter(),
                    x = c.lng(),
                    y = c.lat(),
                    maxX = strictBounds.getNorthEast().lng(),
                    maxY = strictBounds.getNorthEast().lat(),
                    minX = strictBounds.getSouthWest().lng(),
                    minY = strictBounds.getSouthWest().lat();
                    if (x < minX) x = minX;
                    if (x > maxX) x = maxX;
                    if (y < minY) y = minY;
                    if (y > maxY) y = maxY;
                    map.setCenter(new google.maps.LatLng(y, x));
                });
            },
            /**
             * 控制地图的缩放级别
             */
            limitShowMapZoom:function(zoom){
                this.CONSTANT.zoomMax=zoom;
                var limitedZoom=this.CONSTANT.zoomMax;
                google.maps.event.addListener(map, 'zoom_changed',function() {
                    if (map.getZoom() < limitedZoom) map.setZoom(limitedZoom);
                });
            },
            /**
             * 异步加载谷歌API
             */
            loadScript:function(){
                var script = document.createElement("script");
                script.type = "text/javascript";
                script.src = "http://maps.googleapis.com/maps/api/js?v=3&key="+this.CONSTANT.mapkey+"&sensor=false&libraries=drawing,places";
                document.body.appendChild(script);
            },
            /**
             * 谷歌街道
             */
            initStreetMap:function(key){
              this.CONSTANT.mapkey=key|| this.CONSTANT.mapkey;
              var mapOptions = {
                    center: new google.maps.LatLng(GoogleUtil.CONSTANT.centerLat,GoogleUtil.CONSTANT.centerLng),
                    zoom: this.CONSTANT.DEFAULT_ZOOM,
                    panControl: true,
                    zoomControl: true,
                    mapTypeControl: false,
                    scaleControl: true,
                    scrollwheel:true,
                    draggable:true,
                    overviewMapControl: true,
                    streetViewControl:true,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    navigationControlOptions: {
                            style: google.maps.NavigationControlStyle.ZOOM_PAN,
                            position: google.maps.ControlPosition.TOP_LEFT
                    }
                };
                map = new google.maps.Map(document.getElementById(this.CONSTANT.container),mapOptions);
            },
            /**
             * 谷歌卫星
             */
            initSatelliteMap:function(key){
                this.CONSTANT.mapkey=key|| this.CONSTANT.mapkey;
                var mapOptions = {
                        center: new google.maps.LatLng(GoogleUtil.CONSTANT.centerLat,GoogleUtil.CONSTANT.centerLng),
                        zoom: this.CONSTANT.DEFAULT_ZOOM,
                        panControl: true,
                        zoomControl: true,
                        mapTypeControl: false,
                        scrollwheel:true,
                        draggable:true,
                        scaleControl: true,
                        overviewMapControl: true,
                        mapTypeId: google.maps.MapTypeId.SATELLITE,
                        navigationControlOptions: {
                            style: google.maps.NavigationControlStyle.ZOOM_PAN,
                            position: google.maps.ControlPosition.TOP_LEFT
                        }
                    };
                map = new google.maps.Map(document.getElementById(this.CONSTANT.container),mapOptions);
            },
            /**
             * 居中或缩放
             */
            centerAndZoom:function(latlng,zoom){
                if(latlng) map.setCenter(latlng);
                if(zoom) map.setZoom(zoom);
            },
            /**
             * 获取图片对象
             */
            getIcon:function(imageUrl,size){
                var imgSize=size||32;
                var offSize=imgSize/2;
                var defaultSize=new google.maps.Size(imgSize, imgSize);
                var myIcon={
                        url: imageUrl,
                        size: defaultSize,
                        scaledSize:new google.maps.Size(imgSize,imgSize),
                        origin: new google.maps.Point(0,0),
                        anchor: new google.maps.Point(offSize,offSize)
                };
                return myIcon;
            },
            /**
             * 创建一个地图bounds对象
             * @param points
             */
            createBounds:function(points){
                if(points) {
                    var bounds=new google.maps.LatLngBounds();
                    for ( var i = 0; i < points.length; i++) {
                        var point=points[i];
                        if(point){
                            bounds.extend(point);
                        }
                    }
                    return bounds;
                }
                return null;
            },
            /**
             * 设置适合的地图边界范围Bounds
             * @param points
             */
            panToBounds:function(points){
                if(points){
                    var bounds=this.createBounds(points);
                    if(bounds) map.panToBounds(bounds);
                }
            },
            /**
             * 设置合适的覆盖物显示范围(覆盖物聚合)
             */
            getViewport:function(points){
                if(points){
                    var bounds=this.createBounds(points);
                    if(bounds) {
                        map.fitBounds(bounds);
                    }
                }
            }
        };
        
        var iterator=0;
        
        GoogleUtil.tools={
            /**
             * 创建信息窗体
             */
            createInfoWindow:function(latlng,htmlContent){
                var infowindow = new google.maps.InfoWindow({
                      content: htmlContent,
                      position:latlng,
                      disableAutoPan:false
                  });
                return infowindow;
            },
            /**
             * 添加信息窗体
             */
            addInfoWindow:function(latlng,htmlContent,isCenter){
                if(!infoWindow){
                    infoWindow=this.createInfoWindow(latlng, htmlContent);
                }else{
                    infoWindow.close();
                    infoWindow.setPosition(latlng);
                    infoWindow.setContent(htmlContent);
                }
                infoWindow.open(map);
                if(isCenter) map.setCenter(latlng);
            },
            /**
             * 创建标注
             */
            createMarker:function(id,title,point,icon){
                var marker = new google.maps.Marker({
                    position: point,
                    map: map,
                    icon:icon,
                    id:id
                 });
                 marker.id=id;
                 marker.setTitle(title);
                return marker;
            },
            /**
             * 添加标注
             */
             addMarker:function(id,title,point,icon){
                 var marker =this.createMarker(id,title,point,icon);
                 markers.push(marker);
                 marker.setMap(map);
                 return marker;
             },
             /**
              * 批量添加标注
              */
             addMarkers:function(points){
                 if(points){
                     for ( var i = 0; i < points.length; i++) {
                        var point=points[i];
                        this.addMarker(point);
                     }
                 }
             },
             /**
              * 添加跟踪轨迹线条
              */
             addLineFeature:function(id,points,style){
                 var lineSymbol = {
                           path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                           //scale: 2,
                           strokeColor: 'red'
                     };
                 var defaultStyle={
                            path: points,
                            icons: [{
                                  icon: lineSymbol,
                                  offset: '0%'
                                    }],
                            map: map
                          };
                 lineFeature = new google.maps.Polyline(style||defaultStyle);
                 lineFeature.id=id;
                 lineFeature.track=id;
                 markers.push(lineFeature);
                 return lineFeature;
             },
             /**
              * 添加折线(轨迹,包括起点、终点)
              */
             addLineFeatureAndStartAndEndPoint:function(spObj,points, startImageUrk,endImageUrk,lineStyle){
                 var len=points.length;
                 var index =len - 1;
                 var startPoint = points[0];
                 var endPoint =points[index];
                 var startIcon = GoogleUtil.getIcon(startImageUrk,20);
                 var endIcon = GoogleUtil.getIcon(endImageUrk,20);
                 this.addMarker("start", spObj.start, startPoint, startIcon);
                 this.addMarker("end", spObj.end, endPoint, endIcon);
                 if(len>=2){
                    var d=(len/2)+"";
                    d=parseInt(d);
                    GoogleUtil.centerAndZoom(points[d],12);
                 }
                 this.addLineFeature("track_line",points,lineStyle);
             },
             /**
              * 标注动画
              */
             markerAnimate:{
                 dropSetTimeout:{
                     drop:function(points){
                         iterator=0;
                         for (var i = 0; i < points.length; i++) {
                                setTimeout(function() {
                                    GoogleUtil.tools.markerAnimate.dropSetTimeout.addMarker(points);
                                }, i * 200);
                         }
                     },
                     addMarker:function(points){
                         markers.push(new google.maps.Marker({
                                position: points[iterator],
                                map: map,
                                draggable: false,
                                animation: google.maps.Animation.DROP
                        }));
                        iterator++;
                     }
                 }
             },
             /**
              * 轨迹操作
              */
             track:{
                 /**
                  * 添加轨迹线条
                  */
                 addLineTrack:function(points){
                     if(points){
                         var lineCoordinates=[];
                         for ( var i = 0; i < points.length; i++) {
                              var latlng=new google.maps.LatLng(30.65721817, 104.06594494);
                              lineCoordinates.push(latlng);
                         }
                         var lineSymbol = {
                                   path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
                                   //scale: 2,
                                   strokeColor: 'red'
                             };
                         lineFeature = new google.maps.Polyline({
                               path: lineCoordinates,
                               icons: [{
                                  icon: lineSymbol,
                                  offset: '0%'
                                    }],
                               map: map
                        });
                        lineFeature.id="track_line";
                     }
                 },
                 /**
                  * 轨迹回放操作
                  */
                 operate:{
                     count:0,
                     object:null,
                     addListener:function(){
                           var count=this.count;
                           var animate=window.setInterval(function() {
                              count = (count + 1) % 200;
                              GoogleUtil.tools.operate.count=count;
                              var icons = line.get('icons');
                              icons[0].offset = (count / 2) + '%';
                              line.set('icons', icons);
                              //终点停车
                              if((count / 2)>=99){
                                  clearInterval(this);
                              }
                          }, 20);
                          this.object=animate; 
                     },
                     play:function(){
                          this.count=0;
                          this.addListener();
                     },
                     replay:function(){
                         this.addListener();
                     },
                     pause:function(){
                         if(this.object)clearInterval(this.object);
                     },
                     stop:function(){
                         if(this.object)clearInterval(this.object);
                         this.count=0;
                     }
                 }
             },
             getOverlayByNodeId:function(id,value){
                 for (var i = 0; i < markers.length; i++) {
                    var marker=markers[i];
                    if(marker[id]==value){
                        return marker;
                    } 
                 }
                 return null;
             },
             /**
              * 删除或显示覆盖物
              */
             deleteOrShowMarkerOverlayers:function(map){
                 for (var i = 0; i < markers.length; i++) {
                        if(map==null) markers[i].setVisible(false);
                        markers[i].setMap(map);
                 }
                 if(map==null)  markers = [];
             },
             /**
              * 删除轨迹
              */
             deleteTrack:function(){
                 if(lineFeature){
                     lineFeature.setVisible(false);
                     lineFeature.setMap(null);
                 } 
             },
             /**
              * 移除所有覆盖物
              */
             removeAllOverlays:function(){
                 for (var i = 0; i < markers.length; i++) {
                     markers[i].setVisible(false);
                     markers[i].setMap(map);
                 }
                 markers = [];
             },
             /**
              * 移除一个覆盖物
              */
             removeOverlay:function(propertyName,value){
                 if(value){
                     for (var i = 0; i < markers.length; i++) {
                         var marker=markers[i];
                         if(marker[propertyName]==value){
                             markers[i].setVisible(false);
                             markers[i].setMap(map);
                         }
                     }
                 }
                 if(propertyName=="track"||propertyName=="track_line"){
                     if(lineFeature){
                         lineFeature.setVisible(false);
                         lineFeature.setMap(null);
                         lineFeature=null;
                     }
                 }
             },
             /**
              * 显示或隐藏标注
              */
             isToShowMarkers:function(markers,bool){
                 if(markers){
                     for (var i = 0; i < markers.length; i++) {
                         var marker=markers[i];
                         marker.setVisible(bool);
                     }
                 }
             },
             /**
              * 删除轨迹覆盖物
              */
             removeTrackLineWithStartAndEndOverlay:function(){
                 this.removeOverlay("id", "track_line");
                 this.removeOverlay("id", "track");
                 this.removeOverlay("id", "start");
                 this.removeOverlay("id", "end");
                 if(lineFeature){
                     lineFeature.setVisible(false);
                     lineFeature.setMap(null);
                     lineFeature=null;
                 }
                 this.removeAllOverlays();
             }
        };
        
        GoogleUtil.event={
                /**
                 * 地图缩放事件
                 */
                mapZoomChanged:function(markers,zoom){
                    var listener=google.maps.event.addListener(map, 'zoom_changed', function(event) {
                         if(map.getZoom()<zoom){
                             var myMarkers=markers;
                             GoogleUtil.tools.isToShowMarkers(markers,false);//隐藏标注
                             markers=myMarkers;
                         }else{
                             GoogleUtil.tools.isToShowMarkers(markers,true);//显示标注
                         }
                     });
                    return listener;
                },
                /**
                 * 点击标注事件
                 */
                markerClick:function(marker){
                    var listener=google.maps.event.addListener(marker, 'click', function(event) {
                         marker.infoWindow.open(map,marker);
                     });
                    return listener;
                },
                /**
                 * 移除监听对象
                 */
                removeListener:function(listener){
                    google.maps.event.removeListener(listener);
                }
        };
        
    })();
    //window.onload= GoogleUtil.loadScript();
  • 相关阅读:
    mysql代码实现hive中的rank()排序方法,获得top3中的最小值
    MySQL--Hive中字段数据类型对比
    使用shell脚本连接mysql shell脚本执行mysql语句
    WPS中查看超链接后返回超链接位置
    shell脚本中常用的命令
    Lamda一行代码实现"36选7"随机自动选号
    创建Visual studio项目模板 vstemplate关键点纪要
    网络传输及数据解析
    动画
    触摸事件与手势识别
  • 原文地址:https://www.cnblogs.com/boonya/p/3293313.html
Copyright © 2020-2023  润新知