gmap3 地图（二）

最新推荐文章于 2022-03-25 14:51:12 发布
最新推荐文章于 2022-03-25 14:51:12 发布
阅读量1.2k 收藏
点赞数
分类专栏： JS/JQUERY 文章标签： google地图 jquery 地图 streetview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chen8703/article/details/26220655
版权
主要代码： 

<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"}}
];


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

chen8703
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
gmap3添加多种本地地图
12-06
imagemaptype:{values:[{},{}..]}
GMAP3(待完善)
weixin_33724570的博客
09-11 140
2019独角兽企业重金招聘Python工程师标准>>> ...
gmap3 地图（一）
漂泊情愫
05-19 893
一种基于GOOGLE地图的管理JQUERY插件，官方网址：http://gmap3.net/en/
gmap-v3-test
06-07
gmap demo 包含高德 腾讯地图 9-12级 南京区数据
gmap3v5.1.1
10-10
gmap调用google地图的api，各种demo示例
gmap实现地图的旋转
weixin_45408250的博客
09-25 938
我看到网上没有多少关于gmap组件实现地图旋转的资源，自己就写了一篇。 关于gmap地图的旋转我之前一直没有什么头绪，我之前一直用的是gmap.net.windows组件，地图的旋转功能，一直用不了。 gmap.bearing就算初始化了也是用不了的。在控件的属性中也设置不了。 之后我把组件换成了gmap.net。地图旋转功能就可以实现了，旋转度数可以自由设定。由于我没有使用鼠标按住地图控制...
GMap.net 地图展示以及地图标记
freeline的博客
07-22 2635
GMap.net 地图展示以及地图标记
WPF GMap使用高德地图
weixin_43676950的博客
03-25 2066
文章目录前言一、Nuget下载Gmap二、代码1.添加类2.加载高德地图总结 前言 近日在项目中用到了GMap，并且Gmap中使用了高德地图，特此记录一下。 一、Nuget下载Gmap 在Nuget中搜索GMap，选择GMap.NET.Presentatiom进行下载安装。（请注意版本） 二、代码 1.添加类 添加一个类，让其GMapControl类。 代码如下： using GMap.NET; using GMap.NET.MapProviders; using GMap.NET.Projectio
GMAP离线地图下载
10-19
GMAP离线地图下载，GMAP离线地图下载，支持谷歌、百度、高德、腾讯，支持行政区域与自定义下载，Zoom级别可以自定义设置，主要便于C#GMAP开发离线地图做参考，尤其是根据行政区域下载。.rar
Gmap加载在线天地图
09-26
Gmap开源的强大的地图显示软件，不支持天地图资源，本资源研究天地图的切片方式，添加天地图的矢量和影像在线和离线显示。
C# Winform开发使用离线地图 GMap 例程
05-21
C# Winform开发使用离线地图 GMap 基础例程，包括导入离线地图，地图图层绘制标点、多边形、圆、图片、鼠标移动显示坐标经纬度等。
C#调用GMap在地图上打点等操作
07-19
C#调用GMap在地图上打点, 绘制多边形, 显示标签, 点闪烁
google 地图
漂泊情愫
06-16 977
先暂且记录，以后有时间慢慢调整注释
js/jquery 跨站提交
漂泊情愫
03-04 735
方法一：iframe提交 var _login_lock = 0; function LoginSubmit() { var a, actionURL = "http://www.aaa.aaa", loginName = document.getElementById("login_username"), loginPaswd = document.getElementById("lo
google地图整理版（一）
漂泊情愫
07-09 546
首先先上效果图： 1：
sublime text3 常用操作
漂泊情愫
08-26 464
1,保存时去除每行代码后面的空格 进入 preferences ==> settings -user 添加一行   "trim_trailing_white_space_on_save": true
基于关键词搜索结果的微博爬虫（下载即用）.zip
05-21
基于关键词搜索结果的微博爬虫（下载即用）.zip本项目适合计算机相关专业(如软件工程、计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用，当然也适合小白学习进阶。如果基础还行，可以在此代码基础上进行修改，以实现其他功能。 基于关键词搜索结果的微博爬虫（下载即用）.zip本项目适合计算机相关专业(如软件工程、计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用，当然也适合小白学习进阶。如果基础还行，可以在此代码基础上进行修改，以实现其他功能。 基于关键词搜索结果的微博爬虫（下载即用）.zip本项目适合计算机相关专业(如软件工程、计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用，当然也适合小白学习进阶。如果基础还行，可以在此代码基础上进行修改，以实现其他功能。 基于关键词搜索结果的微博爬虫（下载即用）.zip本项目适合计算机相关专业(如软件工程、计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用，当然也适合小白学习进阶。如果基础还行，可以在此代码基础上进行修改
node-v4.4.1-headers.tar.xz
最新发布
05-21
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
.net gmap离线地图包
11-19
.NET GMap离线地图包是一种在.NET平台上使用的地图服务的解决方案。它可以让开发者在没有网络连接的情况下使用地图功能，因为它支持离线地图包的加载和使用。这意味着用户不必依赖于网络连接，可以在没有网络的情况...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值