当前位置: 首页 > 工具软件 > GMAP3 > 使用案例 >

gmap3 地图(二)

慕容博涛
2023-12-01
主要代码:

<script type="text/javascript">
        var ifw=null;
        var allMarkers={};
        var data;
        var panorama;
        $(function () {
            data = JSON.parse($("#hdnresult").val());
            loadleft(data);

            $("#googleMap").gmap3({
                map: {
                    options: {
                        center: [43.447194799777414, -79.20602975898436],
                        zoom: 9,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    },
                    events: {
                        bounds_changed: function (map) {
                            var bounds = map.getBounds();
                            var mapData = JSON.parse($("#hdnresult").val());
                            var dataArray = [];

                            for (var i = 0; i < mapData.length; i++) {
                                var point = new google.maps.LatLng(mapData[i].lat, mapData[i].lng);
                                if (bounds.contains(point)) {
                                    dataArray.push(mapData[i]);
                                }
                            }
                            var zoom = map.getZoom(); //21

                            if (zoom == 21) {
                                $(".cluster-1").css("background-image", "url(images/map/007.png)");
                            } else {
                                $(".cluster-1").css("background-image", "url(images/map/m1.png)");
                            }

                            loadleft(dataArray);
                        }
                    }
                },
                marker: {
                    values: data,
                    cluster: {
                        radius: 100,
                        // This style will be used for clusters with more than 0 markers
                        0: {
                            content: "<div class='cluster cluster-1'>CLUSTER_COUNT</div>",
                            width: 53,
                            height: 52
                        },
                        // This style will be used for clusters with more than 20 markers
                        5: {
                            content: "<div class='cluster cluster-2'>CLUSTER_COUNT</div>",
                            width: 56,
                            height: 55
                        },
                        // This style will be used for clusters with more than 50 markers
                        10: {
                            content: "<div class='cluster cluster-3'>CLUSTER_COUNT</div>",
                            width: 66,
                            height: 65
                        },
                        events: {
                            click: function (cluster, event, context) {
                                var map = $(this).gmap3("get");
                                var zoom = map.getZoom(); //21
                                var aaa = $(cluster.main.getDOMElement());
                                var icerik = "";
                                if (zoom == 21) {
                                    for (i = 0; i < context.data.markers.length; i++) {
                                        icerik += "<div class='accordionButton'>" + context.data.markers[i].data.itemname + "</div>";
                                    }
                                    if (context.data.markers[0]) {
                                        var atLng = new google.maps.LatLng(context.data.markers[0].lat, context.data.markers[0].lng);
                                        showInfoWindow(icerik, atLng, 21);
                                    }
                                }
                            }
                        }
                    },
                    events: {
                        click: function (marker, event, context) {                        
                            showdetail(context.data.itemid);

                        }
                    }
                }
            });

            $("#leftdata").on("click", ".street", function () {
                var lat = $(this).attr("lat");
                var lng = $(this).attr("lng");

                var fenway = new google.maps.LatLng(lat, lng);

                var map = $("#googleMap").gmap3("get");
                var panoramaOptions = {
                    position: fenway,
                    pov: {
                        heading: 34,
                        pitch: 10,
                        zoom: 1
                    }
                };
                panorama = new google.maps.StreetViewPanorama(document.getElementById("streetview"), panoramaOptions);
                map.setStreetView(panorama);
            });



            $("#btnmylocation").click(function () {
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(geoSuccess, geoError, { timeout: 8000 });
                }
            });


            $("#btnAddLocation").click(function () {
                var lat = 43.7631810000000;
                var lng = -79.4922257000000;
                var atLng = new google.maps.LatLng(lat, lng);

                var address = getAddressByLatLng(atLng);
                var content = '<div><input type="text" id="a" /><br /><input type="text" id="Text1" value="#@#"/><br /><input type="button" id="btnsub" value="确定"/><input type="button" id="btnclose" value="关闭"/></div>';
                if (address) {
                    content = content.replace("#@#", address);
                } else {
                    content = content.replace("#@#", "");
                }

                clearAddLocation_Marker();
                showInfoWindow(content, atLng);

                $("#googleMap").gmap3({
                    marker: {
                        latLng: atLng,
                        options: {
                            draggable: true
                        },
                        tag: ["marker_addLocation"],
                        events: {
                            dragend: function (marker) {
                                var latlng = marker.getPosition();
                                var address = getAddressByLatLng(latlng);
                                var content = '<div><input type="text" id="a" /><br /><input type="text" id="Text1" value="#@#"/><br /><input type="button" id="btnsub" value="确定"/><input type="button" id="btnclose" value="关闭"/></div>';
                                if (address) {
                                    content = content.replace("#@#", address);
                                } else {
                                    content = content.replace("#@#", "");
                                }
                                showInfoWindow(content, latlng);
                            }
                        }
                    },
                    map: {
                        options: {
                            center: atLng,
                            zoom: 12
                        }
                    }
                });
            });


            $("#btnHideStreetView").click(function () {
                if (panorama)
                    panorama.setVisible(false);
            });

        });

        function clearAddLocation_Marker()
        {
             $("#googleMap").gmap3({
                    clear: {
                        name: "marker",
                        tag: ["marker_addLocation"],
                        all: true
                    }
                });
        }


        function getAddressByLatLng(latLng) {
            var address = "";
            var geo = new google.maps.Geocoder();
            geo.geocode({
                "location": latLng
            }, function (results, state) {
                if (state == google.maps.GeocoderStatus.OK) {
                    if (results[0]) {
                        address = results[0].formatted_address;
                    }
                }
            }
           );
            return address;
        }

        function geoSuccess(p){
            var lat = p.coords.latitude;
            var lng = p.coords.longitude;
            var atLng = new google.maps.LatLng(result.lat, result.lng);
            $("#googleMap").gmap3({
                marker: {
                    latLng: atLng
                },
                map: {
                    options: {
                        center: atLng,
                        zoom: 12                       
                    }
                }
            }); 
        }

        function geoError(e) {
            switch(e.code) {
                case 1:
                    alert("没有权限");
                    break;
                case 2:
                    alert("无法确定设备的位置");
                    break;
                case 3:
                    alert("超时");
                    break;
            }
        }

       
        function markerSelected(id) {
            $("ul li").removeClass("bgcolor");
            $("#" + id).addClass("bgcolor");
        }

        function loadleft(data) {
            if(!data)return;
            var inhtml = "";
            inhtml += '  <li style=" width:300px;" id="a">';
            inhtml += '<a href="javascript:void(0)" class="itemname" id="aa">aaaaaaaaa</a>    ';
            inhtml += '</li>';
            for (var i = 0; i < data.length; i++) {
                inhtml += '  <li style=" width:300px;" id="' + data[i].data.itemid + '">';
                //inhtml += '<a href="javascript:void(0)" class="itemname" οnclick="showdetail(' + data[i].lat + ',' + data[i].lng + ')">' + data[i].data.itemname + '</a>    <a href="javascript:void(0);" class="street" lat="' + data[i].lat + '" lng="' + data[i].lng + '">街景</a>';
                inhtml += '<a href="javascript:void(0)" class="itemname" οnclick="showdetail(' + data[i].data.itemid + ')">' + data[i].data.itemname + '</a>    <a href="javascript:void(0);" class="street" lat="' + data[i].lat + '" lng="' + data[i].lng + '">街景</a>';
                inhtml += '</li>';
            }
            $("#leftdata").html(inhtml);
        }

        function showdetail(itemid)
        {
            if(!data)return;
            closeInfoWindow();
            var latLng;
           
            var result;
            for(var i=0;i<data.length;i++)
            {
               if(itemid==data[i].data.itemid)
               {
                    result=data[i];
                    break;
               }
            }

            latLng = new google.maps.LatLng(result.lat, result.lng);
            showInfoWindow(result.data.itemname, latLng,12);

            
        }

        function closeInfoWindow() {
            if (ifw) {
                ifw.close();
                ifw = null;
            }
        }

        function showInfoWindow(content, latLng,zoom) {
            closeInfoWindow();

            var map = $("#googleMap").gmap3("get");

            ifw = new google.maps.InfoWindow({
                maxWidth: 200,
                content: content,
                position: latLng,
                pixelOffset: {
                    height: -25,
                    width: 0
                }
            });
            ifw.open(map);

            if (zoom) {
                map.setCenter(latLng);
                map.setZoom(zoom);
            }
        }

    </script>  

JSON数据格式:

var macDoList = [
  {lat:49.00408,lng:2.56228,data:{drive:false,zip:93290,city:"TREMBLAY-EN-FRANCE"}},
  {lat:49.00308,lng:2.56219,data:{drive:false,zip:93290,city:"TREMBLAY-EN-FRANCE"}},
  {lat:48.93675,lng:2.35237,data:{drive:false,zip:93200,city:"SAINT-DENIS"}},
  {lat:48.93168,lng:2.39858,data:{drive:true,zip:93120,city:"LA COURNEUVE"}},
  {lat:48.91304,lng:2.38027,data:{drive:true,zip:93300,city:"AUBERVILLIERS"}},
  {lat:48.90821,lng:2.51795,data:{drive:false,zip:93190,city:"LIVRY-GARGAN"}},
  {lat:48.90672,lng:2.33205,data:{drive:false,zip:93400,city:"SAINT-OUEN"}},
  {lat:48.89191,lng:2.44477,data:{drive:true,zip:93130,city:"NOISY-LE-SEC"}},
  {lat:48.87986,lng:2.4164,data:{drive:false,zip:93260,city:"LES LILAS"}},
  {lat:48.8556,lng:2.41621,data:{drive:false,zip:93100,city:"MONTREUIL"}},
  {lat:48.83445,lng:2.56199,data:{drive:true,zip:93160,city:"NOISY-LE-GRAND"}},
  {lat:48.83907,lng:2.48585,data:{drive:false,zip:94130,city:"NOGENT-SUR-MARNE"}},
  {lat:48.82102,lng:2.41444,data:{drive:false,zip:94220,city:"CHARENTON-LE-PONT"}},
  {lat:48.82011,lng:2.47548,data:{drive:true,zip:94340,city:"JOINVILLE-LE-PONT"}},
  {lat:48.81429,lng:2.50873,data:{drive:false,zip:94500,city:"CHAMPIGNY-SUR-MARNE"}},
  {lat:48.79584,lng:2.41266,data:{drive:true,zip:94400,city:"VITRY-SUR-SEINE"}},
  {lat:48.79193,lng:2.36959,data:{drive:true,zip:94800,city:"VILLEJUIF"}},
  {lat:48.76182,lng:2.44355,data:{drive:true,zip:94190,city:"VILLENEUVE-SAINT-GEORGES"}},
  {lat:48.75845,lng:2.37052,data:{drive:false,zip:94320,city:"THIAIS"}},
  {lat:48.75619,lng:2.34647,data:{drive:true,zip:94150,city:"RUNGIS"}},
  {lat:48.74476,lng:2.40973,data:{drive:true,zip:94310,city:"ORLY"}},
  {lat:48.939,lng:2.52663,data:{drive:true,zip:93270,city:"SEVRAN"}},
  {lat:46.04532,lng:4.05548,data:{drive:true,zip:42153,city:"RIORGES"}},
  {lat:45.35301,lng:5.33501,data:{drive:true,zip:38590,city:"SAINT-ÉTIENNE-DE-SAINT-GEOIRS"}},
  {lat:45.86416,lng:6.62534,data:{drive:false,zip:74120,city:"MEGÈVE"}},
  {lat:47.48832,lng:-0.54378,data:{drive:true,zip:49100,city:"ANGERS"}},
  {lat:43.17459,lng:2.99269,data:{drive:true,zip:11100,city:"NARBONNE"}}
];


希望看到此文章的朋友能给些指正和优化,谢谢

 类似资料: