高德地图API 之行政区+范围+平移+经纬度+鼠标样式

最新推荐文章于 2024-09-17 10:38:39 发布
最新推荐文章于 2024-09-17 10:38:39 发布
阅读量1.4k 收藏
点赞数 2
分类专栏： 技术
原文链接：https://www.colorgg.com
版权

获取当前地图的行政区 getCity()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script> 
    <style>
        *{margin:0;padding:0;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
        #setZoomNode{width:300px;height:100px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;}
    </style>
</head>
<body>
    <div id="container"></div> 
    <div id="setZoomNode">

    </div>

    <script>
        var map=new AMap.Map("container");    

        map.on("moveend",function(){
            //获取行政区
            map.getCity(function(info){
                console.log(info);
                setZoomNode.innerHTML=info.province+","+info.city+","+info.district;
            })
        })
        
    </script>    
</body>
</html>

 

 注意：默认只能获取中国的行政区

 

设置行政区 setCity()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script> 
    <style>
        *{margin:0;padding:0;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
        #setZoomNode{width:300px;height:100px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;}
    </style>
</head>
<body>
    <div id="container"></div> 
    <div id="setZoomNode">
        <input type="text" id="city">
        <button id="btn">设置行政区</button>
    </div>

    <script>
        var map=new AMap.Map("container");    

        map.on("moveend",function(){
            //获取行政区
            map.getCity(function(info){
                console.log(info);
                setZoomNode.innerHTML=info.province+","+info.city+","+info.district;
            })
        })

        //设置行政区
        map.setCity("宁波");

        //通过事件设置行政区
        btn.onclick=function(){
            map.setCity(city.value);
        }
        
    </script>    
</body>
</html>

 

 

获取地图的范围 getBounds()

c对象

northeast 右上

southwest 左下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script> 
    <style>
        *{margin:0;padding:0;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
        #setZoomNode{width:400px;height:100px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;}
    </style>
</head>
<body>
    <div id="container"></div> 
    <div id="setZoomNode">
        <span id="ne"></span><br>
        <span id="sw"></span><br>
    </div>

    <script>
        var map=new AMap.Map("container");    

        map.on("moveend",function(){
            //获取范围
            console.log(map.getBounds());
            ne.innerHTML=map.getBounds().northeast.toString();
            sw.innerHTML=map.getBounds().southwest.toString();
        })
        
    </script>    
</body>
</html>

 

 

设置地图的显示范围 setBounds()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script> 
    <style>
        *{margin:0;padding:0;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
        #setZoomNode{width:400px;height:100px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;}
    </style>
</head>
<body>
    <div id="container"></div> 
    <div id="setZoomNode">
        <span id="ne"></span><br>
        <span id="sw"></span><br>
    </div>

    <script>
        var map=new AMap.Map("container");    

        //先左下角，再右上角
        var myBounds=new AMap.Bounds([122.240801,29.401671],[123.539934,30.261788]);
        map.setBounds(myBounds);

        //设置的范围并不一定完全贴合获取到的范围，只能是尽可能匹配
        console.log(map.getBounds().northeast.toString());
        console.log(map.getBounds().southwest.toString());
        
    </script>    
</body>
</html>

 

 

限制显示范围 setLimitBounds()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script> 
    <style>
        *{margin:0;padding:0;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
        #setZoomNode{width:400px;height:100px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;}
    </style>
</head>
<body>
    <div id="container"></div> 
    <div id="setZoomNode">
        <span id="ne"></span><br>
        <span id="sw"></span><br>
    </div>

    <script>
        var map=new AMap.Map("container");    

        //限制显示范围
        var bounds=map.getBounds();
        map.setLimitBounds(bounds);
        
    </script>    
</body>
</html>

限制在当前范围内不可查看其它范围的

 

解除范围限制 clearLimitBounds()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script> 
    <style>
        *{margin:0;padding:0;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
        #setZoomNode{width:400px;height:100px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;}
    </style>
</head>
<body>
    <div id="container"></div> 
    <div id="setZoomNode">
        <span id="ne"></span><br>
        <span id="sw"></span><br>
    </div>

    <script>
        var map=new AMap.Map("container");    

        //限制显示范围
        var bounds=map.getBounds();
        map.setLimitBounds(bounds);

        //解除范围限制
        map.clearLimitBounds();
        
    </script>    
</body>
</html>

 

控制单个坐标值的限制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script> 
    <style>
        *{margin:0;padding:0;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
        #setZoomNode{width:400px;height:100px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;}
    </style>
</head>
<body>
    <div id="container"></div> 
    <div id="setZoomNode">
        <span id="ne"></span><br>
        <span id="sw"></span><br>
    </div>

    <script>
        var map=new AMap.Map("container");    

        //限制显示范围
        var bounds=map.getBounds();
        console.log(bounds);
        //单独限制右上角的水平坐标不能超过123
        bounds.northeast.R=123;
        
        map.setLimitBounds(bounds);

        //解除范围限制
        map.clearLimitBounds();
        
    </script>    
</body>
</html>

以上实现右上角的水平范围不会超过123

 

 

一个关于显示和解除地图范围的demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script> 
    <style>
        *{margin:0;padding:0;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
        #setZoomNode{width:400px;height:100px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;}
    </style>
</head>
<body>
    <div id="container"></div> 
    <div id="setZoomNode">
        右边水平限制：<input type="text" id="x2"><br>
        左边水平限制<input type="text" id="x1"><br>
        <button id="btn">确定</button>
        <button id="clear">解除限制</button>
    </div>

    <script>
        var map=new AMap.Map("container");    

        //限制显示范围
        btn.onclick=function(){
            var bounds=map.getBounds();
            //input输入的文本是string，需要转为number
            bounds.northeast.R=Number(x2.value);
            bounds.southwest.R=Number(x1.value);
            map.setLimitBounds(bounds);
        }

        //解除显示范围
        clear.onclick=function(){
            map.clearLimitBounds();
        }

        map.on("moveend",function(){
            console.log(map.getBounds().northeast.R);
            console.log(map.getBounds().southwest.R);
        })
        
    </script>    
</body>
</html>

 

 

地图的平移，以像素为单位

panBy(左右像素，上下像素） 左正右负，上正下负

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script> 
    <style>
        *{margin:0;padding:0;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
        #setZoomNode{width:400px;height:100px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;}
    </style>
</head>
<body>
    <div id="container"></div> 
    <div id="setZoomNode">
        右边水平限制：<input type="text" id="x2"><br>
        左边水平限制<input type="text" id="x1"><br>
        <button id="btn">确定</button>
        <button id="clear">解除限制</button>
    </div>

    <script>
        var map=new AMap.Map("container");    

        setTimeout(function(){
            //向左平移50像素，向上平移30像素
            map.panBy(50,30);
        },2000);
        
    </script>    
</body>
</html>

 

 

随机移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script> 
    <style>
        *{margin:0;padding:0;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
        #setZoomNode{width:400px;height:100px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;}
    </style>
</head>
<body>
    <div id="container"></div> 
    <div id="setZoomNode">

    </div>

    <script>
        var map=new AMap.Map("container");    

        //每3秒随机移动
        setInterval(function(){
            //向左上方向随机移动
            //map.panBy(30*Math.random(),30*Math.random());

            //不确定方向的随机移动
            map.panBy(30*Math.random()-15,30*Math.random()-15);
        },3000);
        
    </script>    
</body>
</html>

 

panTo() 移动到指定位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script> 
    <style>
        *{margin:0;padding:0;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
        #setZoomNode{width:400px;height:100px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;}
    </style>
</head>
<body>
    <div id="container"></div> 
    <div id="setZoomNode">

    </div>

    <script>
        var map=new AMap.Map("container");    

        console.log(map.getCenter().toString());

        setTimeout(function(){
            // 宁波移动到了绍兴
            map.panTo([120.549792,29.868388]);
        },3000);
        
    </script>    
</body>
</html>

 

通过事件设置平移

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script> 
    <style>
        *{margin:0;padding:0;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
        #setZoomNode{width:400px;height:100px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;}
    </style>
</head>
<body>
    <div id="container"></div> 
    <div id="setZoomNode">
        <input type="text" id="x">
        <input type="text" id="y">
        <button id="btn">移动</button>
    </div>

    <script>
        var map=new AMap.Map("container");    

        console.log(map.getCenter().toString());
        
        //通过事件设置
        btn.onclick=function(){
            map.panTo([x.value,y.value]);
        }
    </script>    
</body>
</html>

 

获取鼠标的经纬度

longitude  经度

latitude 纬度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script> 
    <style>
        *{margin:0;padding:0;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
        #setZoomNode{width:400px;height:100px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;}
    </style>
</head>
<body>
    <div id="container"></div> 
    <div id="setZoomNode">
        鼠标点击的经纬度：<span id="xy"></span>
    </div>

    <script>
        var map=new AMap.Map("container");    

        //通过事件设置
        map.on("click",function(e){
            console.log(e.lnglat);
            xy.innerHTML=e.lnglat.lng+","+e.lnglat.lat;
            //同时将鼠标点击位置设置为中心点
            map.setCenter([e.lnglat.lng,e.lnglat.lat]);
        })
    </script>    
</body>
</html>

 以上代码实现鼠标点击的位置作为地图的中心点

 

设置鼠标样式 setDefaultCursor() 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a"></script> 
    <style>
        *{margin:0;padding:0;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }  
        #setZoomNode{width:400px;height:100px;background-color: #fff;border:1px solid;box-shadow:0 0 5px #000;top:20px;right:20px;position: absolute;}
    </style>
</head>
<body>
    <div id="container"></div> 
    <div id="setZoomNode">
        
    </div>

    <script>
        var map=new AMap.Map("container");    

        //只要是css的cursor中能设置的属性值，都可以
        map.setDefaultCursor("pointer");
    </script>    
</body>
</html>

 

 

vue 高德地图设置鼠标样式
且听风吟的博客
04-10 1260
vue 高德地图设置鼠标样式
高德地图的平移
程序媛的博客
10-31 395
高德地图的平移属性
Vue3中集成高德地图并实现平移缩放功能
最新发布
Jiaberrr的博客
09-17 654
大家好，随着前端技术的不断发展，地图应用在我们的项目中越来越常见。本文将介绍如何在Vue3项目中集成高德地图，并通过简单的配置实现地图的平移和缩放功能。
高德地图位置之间的平滑移动
文艺范的博客
12-27 4587
List&lt;LatLng&gt; latLngs = new ArrayList&lt;&gt;(); //然后把需要平滑移动的点坐标全部放入latLngs集合中 //下面就开始使用了 public void startMove() { LatLngBounds.Builder b = LatLngBounds.builder(); for (int i = 0; i &l...
android高德地图点平滑移动,【高德地图SDK】如何实现轨迹平滑移动？
weixin_36389468的博客
05-28 817
很多人应该都有类似的经历，叫完车，想看看车离我还有多远距离？但手机屏幕上的车不是一动不动，就是一跳一跳的漂移。目前市面上大多产品“轨迹平滑移动”做的并不好。市面上只有快的打车和一号专车实现了平滑移动，那么这是怎么做的呢？------------------------------------------------------------------------------------------...
关于在vue2.6+ts技术栈下高德地图API的使用方法
weixin_42833042的博客
01-20 3440
最近公司某个项目用上了vue2.6+typescript的技术栈，整个工程都是用vue-cli3直接生成的，自带了ts-loader来解析ts文件，非常方便。但是对于一些没有没有声明文件的第三方模块，用起来会比较麻烦，过程中，我们用到的高德地图就是其中之一，虽然官方推荐使用vue-amap，但是想追求粒度更细的操作，还是原生的api更为方便，下面来记录一下全程的配置过程。 一、引入api文件 ...
高德地图开发手册 php,地图-参考手册-地图 JS API | 高德地图API
weixin_36373787的博客
04-14 684
方法返回值说明poiOnAMAP(obj:Object)唤起高德地图客户端marker页其中Object里面包含有{ id: "B000A7BD6C",POIIDname:String, 必要参数location:LngLat|position属性 必须参数}detailOnAMAP(obj:Object)唤起高德地图客户端marker详情页其中Object里面包含有{ id: "B000A...
VUE3+Ts使用高德地图组件@vuemap/vue-amap语法检测Amap is not defind
Mr_simoon的博客
03-20 5604
第二种，如果不是eslint语法检测的问题，那就是TS的语法检测了，可以设置declare let Amap :any 或者使用TS的单行忽略 “// @ts-ignore” 就跟写注释一样，我试了结果可行，但是因为我要使用很多次new Amap ，所以暂时作为备选方案。第三种，既然Amap没有找不到，那我们就自己对外暴露一个Amap，里面包含常用的地图API不就行了，创建该文件src\types\Amap.d.ts，在tsconfig.json配置文件添加。下面是Amap.d.ts的内容，可以直接复制。
vue 高德地图geojson_Vue项目中使用高德地图
weixin_33316599的博客
01-22 3445
在一些简单的大屏类展示应用/网页中，经常会用到地图相关的展示场景，除了一些特殊的三维场景需要用Gis/BIM或者WebGL，一些简单的业务就可以直接使用高德地图或者百度地图来完成。本文主要讲述在Vue项目中高德地图JavaScript API的引用方式以及一些简单的API的使用。演示项目使用vue cli 4.0脚手架搭建项目。1. 引用在高德地图发布 2.0 版本...
Vue+OpenLayers6从入门到实战进阶案例汇总目录，Vue+OpenLayers6地图整合教程，OpenLayers6中文文档，OpenLayers6中文手册
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
10-31 3471
本篇作为《Vue+OpenLayers入门教程》和《Vue+OpenLayers实战进阶案例》所有文章的二合一汇总目录，方便查找。 > 本专栏源码是由OpenLayers结合Vue框架编写。 > 本专栏从Vue搭建脚手架到如何引入OpenLayers依赖的每一步详细新手教程，再到通过各种入门案例和综合性的实战案例，带领大家快速上手Vue+OpenLayers开发。
高德地图Marker平滑移动
09-22
高德地图Marker平滑移动,这是一个让marker在地图上平滑移动的demo
高德地图-鼠标上出现当前“城市、区域”
weixin_44774570的博客
06-28 1179
实现效果如下：（不同的地区，显示的地址信息不同） 引入的Js： Js代码： AMapUI.load([‘ui/geo/DistrictExplorer’, ‘lib/$’], function(DistrictExplorer, $) { //创建一个实例 var districtExplorer = new DistrictExplorer({ map: map...
调用高德地图Api实现通过地址转经纬度
ZengDashan的博客
11-26 675
调用高德地图Api实现通过地址转经纬度 在高德地图开放平台注册一个key就可以了，链接在这儿高德地图开放平台 /** * @author _沉淀_ * @version 1.0.0 * @ClassName CoordinateUtils.java * @Description TODO * @createTime 2021年11月26日 13:48:40 */ public class CoordinateUtils { /** * 地址转经纬度 （高德地图Api转换）
python通过高德地图接口获取指定范围POI
辩学思问的博客
09-09 3073
参考出处：https://blog.csdn.net/weixin_47796965/article/details/108372378 高德地图的POI数据是开放使用的，最近看到参考文章，也决定试一下。免费使用请求最多返回1000条信息，本文主要通过对目标区域分块进行请求，实现对限制的规避，以达到解决问题的目标 步骤： 1.获取高德地图目标区域的范围 2.将目标范围内划分为适量的区域，并生成中心点 3.计算中心点的四至，并赋予中心点 4.编写程序。依据高德地图LBS开放的多边形搜索功能，实现对各区域的.
根据已知经纬度求向上，向右平移一定距离，求平移后的经纬度
weixin_30435261的博客
08-20 1819
/** * 度换成弧度 * * @param d * 度 * @return 弧度 */ private static double rad(double d) { return d * Math.PI / 180.0; } /** ...
高德地图添加遮罩，实现圈出某个特定的地区
黑玫瑰
07-14 5011
引入 使用 实现效果
高德地图设置可视区域边界
热门推荐
lloha的博客
06-13 2万+
1、方法介绍 2、示例代码 　2.1通过include来设置可视区域 　2.2通过西南角坐标和东北角坐标来设置可视区域
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值