js使用高德地图api实现定位，行政区域划分，点击事件，只显示某个省市或区，海量点标记

实现定位，行政区域划分，点击事件

效果：

需要引入的高德js：

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key="您申请的高德key"&plugin=AMap.Geocoder&plugin=AMap.DistrictSearch"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>

在Html头部写上以下代码，防止api使用不了报错，切记！！！

    <script type="text/javascript">window._AMapSecurityConfig = {securityJsCode: '您申请的安全密钥',}</script>

js代码：

//初始化地图对象，加载地图
//此处的container是div的id
var map = new AMap.Map("container", {resizeEnable: true,// center: [116.397428, 39.90923],//地图中心点// zoom: 18 //地图显示的缩放级别
});
var geocoder = new AMap.Geocoder({// city: "010", //城市设为北京，默认：“全国”// radius: 1000 //范围，默认：500
});
var marker = new AMap.Marker();var district = null;
var polygons = [];// //行政区查询,这个地方我固定了徐汇区，可根据需求自己更改
function drawBounds() {//加载行政区划插件if (!district) {//实例化DistrictSearchvar opts = {subdistrict: 0,   //获取边界不需要返回下级行政区extensions: 'all',  //返回行政区边界坐标组等具体信息level: 'district'  //查询行政级别为 市};district = new AMap.DistrictSearch(opts);}// district.setLevel(document.getElementById('level').value)district.setLevel('city')// district.search(document.getElementById('district').value, function(status, result) {district.search('徐汇区', function (status, result) {map.remove(polygons)//清除上次结果polygons = [];var bounds = result.districtList[0].boundaries;if (bounds) {for (var i = 0, l = bounds.length; i < l; i++) {//生成行政区划polygonvar polygon = new AMap.Polygon({strokeWeight: 1,path: bounds[i],fillOpacity: 0.4,fillColor: '#80d8ff',strokeColor: '#0091ea'});polygons.push(polygon);}}map.add(polygons)map.setFitView(polygons);//视口自适应for (let i = 0; i < polygons.length; i++) {polygons[i].on('click', (e) => {regeoCode(e.lnglat);})}//用setFitView()方法设置自适配合适视野后，发现实际展示效果有点小，//可以通过setZoom方法解决，或者写map.setZoom(map.getZoom() + 1)map.setZoom(12)});
}drawBounds();/*定位start*/
AMap.plugin('AMap.Geolocation', function() {var geolocation = new AMap.Geolocation({enableHighAccuracy: true, // 是否使用高精度定位，默认:truetimeout: 10000,           // 超过10秒后停止定位，默认：无穷大maximumAge: 0,            // 定位结果缓存0毫秒，默认：0convert: true,            // 自动偏移坐标，偏移后的坐标为高德坐标，默认：trueshowButton: true,         // 显示定位按钮，默认：truebuttonPosition:'RB',    //定位按钮的停靠位置buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)showMarker: flase,         // 定位成功后在定位到的位置显示点标记，默认：trueshowCircle: flase,         // 定位成功后用圆圈表示定位精度范围，默认：truepanToLocation: flase,      // 定位成功后将定位到的位置作为地图中心点，默认：truezoomToAccuracy:true       // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false});map.addControl(geolocation);geolocation.getCurrentPosition(function(status,result){if(status==='complete'){onComplete(result)}else{onError(result)}});AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
});function onComplete(data) {regeoCode(data.position)
}
function onError(data) {// log.error('定位失败');
}
/*定位结束*///以下是将经纬度，地址回显，可根据自己需求修改
function regeoCode(lnglat) {map.add(marker);marker.setPosition(lnglat);$("#addressjd").val(lnglat.lng);$("#addresswd").val(lnglat.lat);geocoder.getAddress(lnglat, function (status, result) {if (status === 'complete' && result.regeocode) {var address = result.regeocode.formattedAddress;$("#address").val(address);} else {log.error('根据经纬度查询位置失败');}});
}//根据地址查询经纬度
function geoCode(address) {geocoder.getLocation(address, function (status, result) {if (status === 'complete' && result.geocodes.length) {var lnglat = result.geocodes[0].location$("#addressjd").val(lnglat.lng);$("#addresswd").val(lnglat.lat);marker.setPosition(lnglat);map.add(marker);map.setFitView(marker);} else {log.error('根据地址查询位置失败');}});
}$("#address").blur(function () {var address = $("#address").val()if (address !== "") {geoCode(address)}
})//绑定点击事件
map.on('click', function (e) {regeoCode(e.lnglat);})

注意：

zoom是不可以增加小数的，比如map.setZoom(map.getZoom() + 0.3)？最终的zoom会按四舍五入算出一个整数，即要么不变，要么+1
也就是说zoom值一般情况下只能是3-18的整数，除非在3D模式下，zoom可以设置为浮点数。

3D模式下设置zoom：

this.overviewMap = new AMap.Map('overview-map', {pitch: 5, // 地图俯仰角度，有效范围 0 度- 83 度viewMode: '3D', // 地图模式resizeEnable: true,center: [116.397428, 39.90923],//地图中心点zoom: 10
})

3D地图模式直接加上这两行配置即可，

pitch: 5, // 地图俯仰角度，有效范围 0 度- 83 度，不想要3D效果此处设置为0即可
viewMode: ‘3D’, // 地图模式

然后再map.setZoom(map.getZoom() + 0.3)，就会发现地图就会放大+0.3的效果。

实现只显示某个省市或区，海量点标记

效果

    var positions = [[121.45383, 31.158318], [121.410572, 31.174769], [121.449711, 31.127758]];var options = {subdistrict: 0,extensions: 'all',level: 'province'};var district = new AMap.DistrictSearch(options);//查询北京市区域district.search('徐汇', function (status, result) {var bounds = result.districtList[0]['boundaries'];var mask = [];for (var i = 0; i < bounds.length; i++) {mask.push([bounds[i]]);}//实例化地图var map = new AMap.Map('container', {mask: mask,zoom: 12,                //设置当前显示级别expandZoomRange: true,    //开启显示范围设置zooms: [7, 20],          //最小显示级别为7，最大显示级别为20center: [121.449145, 31.158531],//地图中心点viewMode: '3D',          //这里特别注意，设置为3D则其它地区不显示zoomEnable: true,        //是否可以缩放地图resizeEnable: true,mapStyle: 'amap://styles/darkblue', //设置地图的显示样式});//添加描边for (var i = 0; i < bounds.length; i += 1) {new AMap.Polyline({path: bounds[i],strokeColor: '#3078AC',strokeWeight: 3,map: map})}var markers = [];for (var i = 0, marker; i < positions.length; i++) {marker = new AMap.Marker({map: map,position: positions[i],icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',offset: new AMap.Pixel(-13, -30)});markers.push(marker);}});

js使用高德地图api实现定位，行政区域划分，点击事件，只显示某个省市或区，海量点标记相关推荐

js应用高德地图API精确定位到门牌号标注并输出当前地址和经纬度
主要就是两个方法,逆地址解析和地址解析过程,以及Chrome只支持https的定位. <head><meta charset="utf-8"><met ...
uniapp+高德地图api 获取定位信息及详细地址
引入高德地图js api 高德地图api官方文档根据官方文档建议,我使用的是JSAPI Loader 并且是通过npm安装的 npm i @amap/amap-jsapi-loader --save ...
Vue中集成高德地图API实现定位与自定义样式信息窗体
场景若依前后端分离版手把手教你本地搭建环境并运行项目: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662 在上面 ...
利用高德地图api进行定位
一.精准定位,需要https,需要用户手动同意. 在初次进入时进行定位,定位成功,保存定位所在城市.再次进入不定位,使用上一次的定位. 1.首先引入高德地图api <script type=&q ...
利用高德地图API实现定位功能
① 注册高德地图的开发者,获取key 过程如图 ②下载SDK,导入jar包注意这里要导入高德地图定位SDK的jar包!!! 如果你先前导入过地图SDK(如2D,3D地图的SDK)再导入定位的SDK运 ...
JS处理高德地图API返回的省市区数据
调用高德地图web API时返回数据太多且无用,以下处理只保留省市区地名先请求高德API const url = "https://restapi.amap.com/v3/config/d ...
python调用高德地图api获取路径规划，然后规划好点显示在地图上（农机路径转移）
我的博客好像跳度比较大,不少内容都涉及,但我是做ros组合导航的,其他的或者是项目设计,或者是因为兴趣,或者是随笔记下来. 无聊写来玩下的小demo,本来试图在硕士期间研究下这个课题即农机从仓库到田间 ...
echarts中formatter修改鼠标悬浮事件信息操作、echarts地图块、散点区分触发点击事件只触发散点问题详解
这里写目录标题 1.实例 2.案例详解 1.实例这次我拿echarts中地图组合散点图的实例 !!!实现效果:滑到散点显示不同于地图块的信息及 formatter 提示窗自定义!!! 这个显示项 ...
android省市区api,使用高德地图API获取最新行政区域数据(省市区等数据json)
image.png 浏览器端访问行政区域数据 $.get("https://restapi.amap.com/v3/config/district?subdistrict=2&ke ...
vue使用高德地图为信息窗体再添加点击事件
即使是用的vue,也不能使用@click为窗体添加点击事件,需要使用onclick,并且在定义了函数后,使用该函数还是会报函数未定义的错误,需要在window下添加该函数,点击时可以在原型链中找到该函 ...

js使用高德地图api实现定位，行政区域划分，点击事件，只显示某个省市或区，海量点标记

实现定位，行政区域划分，点击事件

实现只显示某个省市或区，海量点标记

js使用高德地图api实现定位，行政区域划分，点击事件，只显示某个省市或区，海量点标记相关推荐

最新文章

热门文章