GoogleMapsV3-----基础地图（鼠标移动画矩形）

最新推荐文章于 2024-04-20 09:39:28 发布
最新推荐文章于 2024-04-20 09:39:28 发布
阅读量1.5k 收藏
点赞数
分类专栏： googleMapV3 文章标签： 鼠标移动画矩形
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/solicitous/article/details/8536622
版权 
<html>
<head>
    <title></title>
    
    <script language="javascript" type="text/javascript">
        //【初始化地图】MapInitialize
        //===================================================================================================
        function MapInitialize() {
            //构建经纬度点 
            var latlng = new google.maps.LatLng(30.277925, 120.177597);
            var myOptions =
            {
                zoom: 8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.HYBRID,
                //关闭 API 的默认用户界面设置
                //                disableDefaultUI: true,
                mapTypeControl: false,
                //标尺
                scaleControl: true,
                scaleControlOptions: {
                    position: google.maps.ControlPosition.RIGHT_BOTTOM
                }
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); //实例化地图


            //================================================================================================================
            var dian1 = null;
            var dian1lat = null;
            var dian1lng = null;
            var dian2 = null;
            var dian2lat = null;
            var dian2lng = null;
            var bounds = null;
            var juxing = null;
            var tuodong = null;
            var tuodong1 = null;
            var clickEvent = null;

            var huawanyidongdian1 = null;
            var huawanyidongdian2 = null;
            var huawanyidongchazhilat = null;
            var huawanyidongchazhilng = null;
            var huawanshubiaodianjishijian = null;
            var huawanshubiaoyidongshijian = null;
//            var huawanshubiaoyidongditushijian = null;

            clickEvent = google.maps.event.addListener(map, 'click', function (event) {
                if (dian1 == null) {
                    dian1 = event.latLng;
                    dian1lat = event.latLng.lat();
                    dian1lng = event.latLng.lng();
                    tuodong = google.maps.event.addListener(map, 'mousemove', function (event) {
                        dian2lat = event.latLng.lat();
                        dian2lng = event.latLng.lng();
                        if (dian1lat > dian2lat) {
                            dian2lat = dian2lat + 0.05;
                        } else {
                            dian2lat = dian2lat - 0.05;
                        }
                        if (dian1lng > dian2lng) {
                            dian2lng = dian2lng + 0.05;
                        } else {
                            dian2lng = dian2lng - 0.05;
                        }
                        if (juxing == null) {

                            dian2 = new google.maps.LatLng(dian2lat, dian2lng);
                            bounds = RectangularBoundsProcessing(dian1, dian2);
                            var newRectangularAttribute = {
                                strokeColor: "#6f77ff",
                                strokeOpacity: 0.5,
                                strokeWeight: 2,
                                fillColor: "#4a85ff",
                                fillOpacity: 0.3,
                                //                                editable: true,
                                map: map,
                                bounds: bounds
                            };
                            juxing = new google.maps.Rectangle(newRectangularAttribute);
                        } else {
                            if (dian2 != new google.maps.LatLng(dian2lat, dian2lng)) {
                                dian2 = new google.maps.LatLng(dian2lat, dian2lng);
                                bounds = RectangularBoundsProcessing(dian1, dian2);
                                juxing.setBounds(bounds);
                                tuodong1 = google.maps.event.addDomListener(juxing, 'mousemove', function (event) {
                                    dian2lat = event.latLng.lat();
                                    dian2lng = event.latLng.lng();
                                    if (dian1lat > dian2lat) {
                                        dian2lat = dian2lat + 0.05;
                                    } else {
                                        dian2lat = dian2lat - 0.05;
                                    }
                                    if (dian1lng > dian2lng) {
                                        dian2lng = dian2lng + 0.05;
                                    } else {
                                        dian2lng = dian2lng - 0.05;
                                    }
                                    if (dian2 != new google.maps.LatLng(dian2lat, dian2lng)) {
                                        dian2 = new google.maps.LatLng(dian2lat, dian2lng);
                                        bounds = RectangularBoundsProcessing(dian1, dian2);
                                        juxing.setBounds(bounds);
                                    }
                                });
                            }
                        }
                    });
                } else {
                    try {
                        juxing.setMap(null);
                        bounds = RectangularBoundsProcessing(dian1, dian2);
                        var newRectangularAttribute = {
                            strokeColor: "#6f77ff",
                            strokeOpacity: 0.5,
                            strokeWeight: 2,
                            fillColor: "#4a85ff",
                            fillOpacity: 0.3,
                            editable: true,
                            map: map,
                            bounds: bounds
                        };
                        juxing = new google.maps.Rectangle(newRectangularAttribute);
                        dian1 = null;
                        dian1lat = null;
                        dian1lng = null;
                        dian2 = null;
                        dian2lat = null;
                        dian2lng = null;
                        bounds = null;
                        google.maps.event.removeListener(clickEvent);
                        clickEvent = null;
                        google.maps.event.removeListener(tuodong);
                        tuodong = null;
                        google.maps.event.removeListener(tuodong1);
                        tuodong1 = null;

                    } catch (e) { }
                    huawanshubiaodianjishijian = google.maps.event.addDomListener(juxing, 'click', function (event) {
                        if (huawanyidongdian1 == null) {
                            huawanyidongdian1 = event.latLng;
                            huawanshubiaoyidongshijian = google.maps.event.addDomListener(juxing, 'mousemove', function (event) {
                                if ((huawanyidongdian1 != null)) {
                                    huawanyidongdian2 = event.latLng;
                                    huawanyidongchazhilat = huawanyidongdian2.lat() - huawanyidongdian1.lat();
                                    huawanyidongchazhilng = huawanyidongdian2.lng() - huawanyidongdian1.lng();
                                    juxing.setBounds(new google.maps.LatLngBounds(new google.maps.LatLng(juxing.getBounds().getSouthWest().lat() + huawanyidongchazhilat, juxing.getBounds().getSouthWest().lng() + huawanyidongchazhilng), new google.maps.LatLng(juxing.getBounds().getNorthEast().lat() + huawanyidongchazhilat, juxing.getBounds().getNorthEast().lng() + huawanyidongchazhilng)));
                                    huawanyidongdian1 = huawanyidongdian2;
                                }
                            });
                            tuodong = google.maps.event.addListener(map, 'mousemove', function (event) {
                                if (huawanshubiaoyidongshijian != null && huawanyidongdian1 != null) {
                                    huawanyidongdian2 = event.latLng;
                                    huawanyidongchazhilat = huawanyidongdian2.lat() - huawanyidongdian1.lat();
                                    huawanyidongchazhilng = huawanyidongdian2.lng() - huawanyidongdian1.lng();
                                    juxing.setBounds(new google.maps.LatLngBounds(new google.maps.LatLng(juxing.getBounds().getSouthWest().lat() + huawanyidongchazhilat, juxing.getBounds().getSouthWest().lng() + huawanyidongchazhilng), new google.maps.LatLng(juxing.getBounds().getNorthEast().lat() + huawanyidongchazhilat, juxing.getBounds().getNorthEast().lng() + huawanyidongchazhilng)));
                                    huawanyidongdian1 = huawanyidongdian2;
                                }
                            });
                        } else {
                            //                            google.maps.event.removeListener(huawanshubiaodianjishijian);
                            //                            huawanshubiaodianjishijian = null;
                            google.maps.event.removeListener(huawanshubiaoyidongshijian);
                            huawanshubiaoyidongshijian = null;
                            google.maps.event.removeListener(tuodong);
                            tuodong = null;
                            huawanyidongdian1 = null;
                            huawanyidongdian2 = null;
                            huawanyidongchazhilat = null;
                            huawanyidongchazhilng = null;
                        }
                    });
                }
            });
        }
        //【矩形Bounds处理】
        //============================================================================================
        function RectangularBoundsProcessing(coordinate1, coordinate2) {
            if (coordinate1 != null && coordinate2 != null) {
                var myNorthEast = null;
                var mySouthWest = null;
                var maxRectangularLat = coordinate1.lat();
                var maxRectangularLng = coordinate1.lng();
                var minRectangularLat = coordinate1.lat();
                var minRectangularLng = coordinate1.lng();
                if (coordinate2.lat() > maxRectangularLat) {
                    maxRectangularLat = coordinate2.lat();
                }
                if (coordinate2.lng() > maxRectangularLng) {
                    maxRectangularLng = coordinate2.lng();
                }
                if (coordinate2.lat() < minRectangularLat) {
                    minRectangularLat = coordinate2.lat();
                }
                if (coordinate2.lng() < minRectangularLng) {
                    minRectangularLng = coordinate2.lng();
                }

                myNorthEast = new google.maps.LatLng(maxRectangularLat, minRectangularLng);
                mySouthWest = new google.maps.LatLng(minRectangularLat, maxRectangularLng);
                var myBounds = new google.maps.LatLngBounds(myNorthEast, mySouthWest);
            }
            return myBounds;
        }
        //【程序完全加载页面后加载地图API】
        //============================================================================================
        function loadScript() {
            var script = document.createElement("script");
            script.type = "text/javascript";
            //sensor=false定位功能为否，region=cn本地化语言中文，callback=initialize在API完全加载完成后再回调执行初始化函数。
            script.src = "http://maps.google.com/maps/api/js?sensor=false&libraries=places&callback=MapInitialize";
            document.body.appendChild(script);
        }
        window.onload = loadScript;
    </script>
</head>
<body>
    <div id="map_canvas" style="width: 100%; height: 100%;">
    </div>
</body>
</html>


 

solicitous
关注
专栏目录
google map 自定义矩形框
zhang52088的博客
09-12 509
转自:http://www.playgoogle.com/post/3.html /*Rectangle类，添加自定义的DIV图层 ==================================================================== *author Karry@derbysoft.com *继承自GOverlay(); *矩形是在地图上勾勒经纬边...
谷歌地图鼠标绘制多边形方法
zxcvbnm145的博客
08-28 3026
谷歌地图鼠标点击绘制多边形
Google Map-鼠标移动画线(polyline)
Cool的专栏
04-22 996
老是说“因工作需要而写某某文章”感觉没什么意思！ps:没办法大部分是这样子，汗！ 在实现GPS轨迹移动(即：将GPS多个定位数据用polyline连接起来)的过程中，突发奇想，实现个让线跟着鼠标移动的demo.看效果： 点击左键描点，右键停止画线，线跟随鼠标移动 原文地址：Google Map-鼠标移动画线(polyline) | http://orgcent.com/go
GoogleMapsV3-----基础地图(新建带标记带窗口可移动的圆，矩形，多边形)
solicitous的专栏
01-24 865
function fenceObj(fence, fenceType, information, marker, lable) { this.fence = fence this.fenceType = fenceType this.information = information this.mark
谷歌地球绘制等高线教程
09-13
谷歌地球绘制等高线教程，包括一些注意的事项和操作
Unity资产合集包 Unity Asset Bundle 1 June 2022
09-23 401
文件大小共：4.5G
Java编程-计算矩形的周长和面积
weixin_45933223的博客
11-02 6873
编写程序，定义一个矩形类，具有长、宽、面积、周长共四个成员变量，计算面积和计算周长的两个方法，在主类中创建矩形对象，输入长和宽，输出矩形的面积和周长。
vue 鼠标拖动画矩形_canvas实现鼠标拖拽矩形移动改变大小
weixin_39522486的博客
12-22 1937
项目的一个新需求，动态生成矩形框，鼠标点击拖动改变矩形框的位置，并可以调整大小。之前做过一个小demo,需求类似，但是在canvas内只有一个矩形框，拖动移动，当时记得是用isPointInPath()直接判断鼠标是否点在了矩形框以内。新需求的矩形框个数为n,经过测试，isPointinPath实现过程中有bug，并不能精准定位到具体点击到canvas的某一个矩形框。经过一系列的头脑风暴，才想出了...
关于D3画流程图-节点悬浮提示信息和节点形状的设置
u012545017的专栏
12-02 5176
最近开发项目需要根据后台数据动态画出流程图，因此了解折磨了一点点D3，官网资料和案例好像比较少说明，经过这些天的挖地三尺地找网上资料，终于折磨出了一点点东西。以下是本人这里的一个小demo,希望对有需要的朋友有帮助吧。（例子有点粗糙，仅是为了有个效果而已，实际中应根据数据来正确规范的显示流程图） <!DOCTYPE html> <html lang="en"> &lt...
Qt QGraphics 实现可移动缩放的矩形框
12-10
- `mouseMoveEvent()`: 在鼠标移动时，根据起始位置和当前鼠标位置计算出矩形的新位置，并更新矩形的坐标。 - `mouseReleaseEvent()`: 在鼠标释放时，结束移动操作，更新图形场景并确保所有更改被正确渲染。 2. *...
unity地图插件onlinemaps v3 3.7.11
02-27
• Unity 2017.4 LTS 及更高版本； • 渲染管线：标准 RP、URP、HDRP； • 独立平台、Android、iOS、Windows Store、WebGL； • 在线和离线地图； • 带有海拔的 2D 地图和 3D 地图； • 2D、3D、广告牌和自定义标记； • 您可以在任何地方显示地图：在 UI 上、在场景中或绘制成纹理； • 大量的预定义图块源：Google地图，Mapbox，ArcGIS，诺基亚地图，必应地图，Open Street Maps和其他许多地图项（16个提供程序，88种地图类型）； • 能够创建自己的地图样式或使用自己的图块源（例如，WMS）； • 带或不带标签的多语言地图； • 强大的图块、海拔和自定义数据缓存系统； • 支持 Google API 网络服务：Direction API、Elevation API、Geocode API、Places API、Places Autocomplete API、Roads API； • 其他 Web 服务：AMap 搜索、必应地图海拔 API、必应地图位置 API、HERE 路由 API、Open
Unity3D线上地图 Online Maps v3 3.7.5.2
02-19
Unity3D线上地图
Online maps v3.3.2.1.zip
08-29
Online Maps 3.3.2.1 - 支持16个公司88种地图类型 ， 特点： •Unity 2017.1 - 2019.x; •独立，Android，iOS，Windows Store，WebGL; •在线和离线地图; •带有高程的2D地图和3D地图; •2D，3D和Billboard标记; •支持Texture，NGUI，SpriteRenderer，uGUI（UIImage，UIRawImage）和Tileset; •谷歌地图，Mapbox，ArcGIS，诺基亚地图（HERE.com），虚拟地球（Bing地图），Open Street Maps等等（16个提供商，88种地图类型）; •多语言地图，能够创建自己的风格; • 支持Google API Web服务：Direction API，Elevation API，Geocode API，Places API，Places Autocomplete API，Roads API; •其他Web服务：AMap Search，Bing Maps Elevation API，Bing Maps Location API，HERE Routing API，Open Route Service Directions，Open Route Service Geocoding，Open Street Map Nominatim，Open Street Map Overpass API，QQ Search，What 3 Words; •使用uPano显示Google街景视图; •附加功能：GPS（带模拟器），缓存，流量，叠加，绘图API，运行时3D建筑物; •集成： Bolt， Curved UI， EasyTouch， Fingers - Touch Gestures， NGUI， Playmaker， Real World Terrain，TouchScript，uContext， uPano ; •易于使用且功能强大的API。附上了大量使用示例。实例图集 ; •内置更新系统。
Online Maps V3.7.4.1
08-27
在线地图是一个通用的多平台地图解决方案，适用于您的2D、3D、AR/VR和移动应用程序和游戏。 完全可定制，非常容易学习和使用，同时也是业界最强大和最灵活的解决方案之一。 支持大量服务以满足任何映射需求，并与最佳资产存储资产集成。 该包包含完整的源代码，没有依赖关系，如果您想添加或更改某些功能，您可以很容易地做到这一点。 没有编程经验或不懂C语言-在线地图支持使用Bolt和Playmaker编写可视化脚本。 在一个资源中创建统一地图的所有功能。
unity在线地图Online Maps
11-07
unity在线地图Online Maps 2.5.16 需Unity 4.6.0或以上版本 Requires Unity 4.6.0 or higher. Features: ? Supports Unity v4.6+, Unity v5+; ? Standalone, Android, iOS, Windows Store, WebGL, Webplayer; ? Online and offline maps; ? 2D maps and 3D maps with elevation; ? 2D, 3D and Billboard markers; ? Supports Texture, GUITexture, NGUI, DF-GUI, iGUI, SpriteRenderer, uGUI (UIImage, UIRawImage) and Tileset; ? Google Maps, Mapbox classic, ArcGIS, Nokia Maps (HERE.com), Virtual Earth (Bing Maps), Open Street Maps, and many others (16 providers, 88 map types); ? Multilingual map with the ability to create your own style; ? Support Google API web services: Direction API, Elevation API, Geocode API, Places API, Places Autocomplete API, Roads API; ? Other web services: AMap Search, Bing Maps Elevation API, Bing Maps Location API, HERE Routing API, Open Route Service Directions, Open Route Service Geocoding, Open Street Map Nominatim, Open Street Map Overpass API, QQ Search, What 3 Words; ? Additional Features: GPS (with emulator), cache, traffic, Overlays, Drawing API, runtime 3D buildings;
VSCode + ESP-IDF安装与配置全过程
最新发布
phmatthaus的专栏
04-20 2477
VSCode + ESP-IDF安装与配置全过程
CCF.2013 12-3.最大的矩形（单调栈）
红鲤鱼与绿鲤鱼与驴
08-01 3075
问题描述 试题编号： 201312-3 试题名称： 最大的矩形 时间限制： 1.0s 内存限制： 256.0MB 问题描述： 问题描述 　　在横轴上放了n个相邻的矩形，每个矩形的宽度是1，而第i（1 ≤ i ≤ n）个矩形的高度是hi。这n个矩形构成了一个直方图。例如，下图中六个矩形的高度就分别是3, 1, 6, 5, 2, 3。 ...
Online Maps v3.5.unitypackage
04-01
很实用的一款Unity在线地图插件 •在线和离线地图; •与高程地图和三维地图; •2d、3 d和广告牌标记; •支持纹理,GUITexture,同时,DF-GUI,iGUISpriteRenderer,uGUI(用户界面图像UIRawImage)和确定; •谷歌地图、Mapbox ArcGIS、诺基亚地图(HERE.com),虚拟地球(必应地图),公开街道地图,和许多其他人(16提供者,88地图类型); •多语言地图能够创建自己的风格; •支持谷歌API的web服务:方向API,海拔API,项目点的API,API的地方,地方自动完成API,公路API; •其他web服务:同理搜索、必应地图海拔API,必应地图位置API,在路由API,开放路线服务方向,开放路线地理编码服务,公开街道地图Nominatim,公开街道地图天桥API,QQ搜索,三个字; [backcolor=rgb(241, 240, 175) !important]•附加功能:GPS(模拟器),缓存,交通,覆盖图,绘图API,运行时3 d建筑物; •集成:现实世界的地形,组织者,弯曲界面; •易于使用且功能强大的API。 大量的使用附加的例子。
CSS3 clip-path详解与图形创建实战
"本文详细介绍了CSS3中的clip-path属性的使用，包括如何创建各种形状的示例，适合需要学习和理解这一特性的开发者参考。" 在CSS3中，`clip-path`是一个非常有用的属性，用于裁剪元素显示的部分，通过定义一个路径来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值