高德地图自适应多经纬度标记

一、效果图

二、高德API网址：

https://lbs.amap.com/demo/javascript-api/example/marker/adaptive-show-multiple-markers

三、JavaScript代码

1. 关键代码

把经纬度数据存入数组，再遍历

// 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照M.forEach(function(marker) {new AMap.Marker({map: map,icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-1.png',position: [marker[0], marker[1]],offset: new AMap.Pixel(-13, -30)});});

2.完整代码

<!doctype html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"><title>自适应显示多个点标记</title><link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/><style>html, body, #container {height: 100%;width: 100%;}.amap-icon img{width: 10px;height: 12px;}</style>
</head>
<body>
<div id="container"></div>
<div class="input-card"><h4>地图自适应</h4><input id="setFitView" type="button" class="btn" value="地图自适应显示" />
</div>
<div class="info"><div id="centerCoord"></div><div id="tips"></div>
</div>
<script type="text/javascript"src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script type="text/javascript">var map = new AMap.Map('container', {resizeEnable: true,center: [121.4627946, 31.2294646],zoom: 13});map.clearMap();  // 清除地图覆盖物// 经纬度坐标数组M = [[121.4630516, 31.2238183], [121.4629259, 31.2257206], [121.461347, 31.2256494], [121.4578552, 31.2474434], [121.4556172, 31.2376933], [121.4529027, 31.2354854], [121.4491054, 31.2346134], [121.4653791, 31.2254191], [121.4504671, 31.2292015], [121.4774505, 31.220563], [121.4752059, 31.2198896], [121.4627, 31.2298394], [121.4627946, 31.2294646], [121.4628254, 31.2304014], [121.4575703, 31.2328863], [121.4520324, 31.230151], [121.4662937, 31.2245365], [121.4625632, 31.2299303], [121.4725084, 31.2273025], [121.467733, 31.2294514], [121.4687913, 31.217645], [121.4685655, 31.2213451], [121.4710652, 31.2219828], [121.4867125, 31.2364261], [121.4799582, 31.2310119], [121.4780073, 31.2343101], [121.4896073, 31.2313363], [121.4858428, 31.2315164], [121.4663837, 31.2174437], [121.4704602, 31.2182139], [121.4630494, 31.2171151], [121.4805746, 31.2171297], [121.4794631, 31.2193552], [121.4580627, 31.2259193], [121.4752296, [121.4728612,31.2365539], [121.4616789, 31.2361266], [121.4619533, 31.2348615], [121.4623219, 31.2328249], [121.4626092, 31.229455], [121.4487555, 31.2497922], [121.4510617, 31.2488802], [121.4505911, 31.2321349], [121.4527052, 31.2492495], [121.4515287, 31.2461154], [121.4552118, 31.2170253], [121.4536832, 31.2203882], [121.4499677, 31.2367065], [121.4511545, 31.2351049], [121.4522878, 31.237611], [121.456164, 31.2153339], [121.4613651, 31.2215623], [121.4560292, 31.2416212], [121.4518694, 31.2325567], [121.4572097, 31.2337985], [121.48531, 31.2500362], [121.4581005, 31.2469049], [121.4581882, 31.2470325], [121.4644565, 31.2475156], [121.4726617, 31.2483711], [121.4708496, 31.2478449], [121.4665671, 31.2468666], [121.4767013, 31.2498071], [121.4752501, 31.2492396], [121.4594485, 31.2258077], [121.4505664, 31.2258241], [121.4878627, 31.2178812], [121.4871429, 31.2203622], [121.4846191, 31.2255059], [121.4835451, 31.2275651], [121.4841731, 31.2263366], [121.4825373, 31.2320954], [121.4818102, 31.2348048], [121.4816958, 31.2352802], [121.4809542, 31.2378755], [121.4807239, 31.2386065], [121.4797842, 31.2412207], [121.4793048, 31.2424421], [121.480053, 31.2405607], [121.4858949, 31.2426453], [121.4531488, 31.2220173], [121.4544926, 31.2186583], [121.4856239, 31.2398595], [121.480771, 31.2164028], [121.4769433, 31.2237981], [121.477269, 31.222584], [121.4799509, 31.2179991], [121.4804124, 31.2170696], [121.4689387, 31.2395778], [121.4699482, 31.2365248], [121.4703843, 31.2356662], [121.4737537, 31.2306891], [121.4670062, 31.2435072], [121.4671694, 31.2426637], [121.4673388, 31.2423519], [121.475755, 31.2275721], [121.4760991, 31.2267721], [121.4766187, 31.2255533], [121.4771516, 31.2228332], [121.4791855, 31.2194487], [121.4691804, 31.2160462], [121.4666389, 31.2255194], [121.4658489, 31.2254884], [121.4751872, 31.2285], [121.4753221, 31.228549], [121.474627, 31.229524], [121.4745099, 31.2294867], [121.4544898, 31.2149752], [121.4626498, 31.2180455], [121.4600358, 31.2183567], [121.4622634, 31.2190318], [121.4588675, 31.2336896], [121.4538518, 31.2395662], [121.4606168, 31.2293174], [121.4649435, 31.2404039], [121.4723619, 31.2379657], [121.4717835, 31.2378294], [121.4861424, 31.2333108], [121.4853436, 31.249484], [121.4849001, 31.246224], [121.4819438, 31.2149411], [121.4778709, 31.2457559], [121.477593, 31.2477358], [121.4772896, 31.2487467], [121.4769021, 31.249694], [121.4768358, 31.2498369], [121.4894805, 31.2146255], [121.4894947, 31.214757], [121.4815599, 31.230335], [121.4828041, 31.2307884], [121.4826683, 31.2307414], [121.4783663, 31.2208218], [121.4669053, 31.2452821], [121.4670485, 31.2442947], [121.4667747, 31.2452616], [121.4664646, 31.2488625], [121.466018,[121.480951, 31.2209712], [121.4812532, 31.2215862], [121.485694, 31.2206002], [121.4860257, 31.2225928], [121.4832177, 31.225236], [121.466686, 31.2468928], [121.4676062, 31.2424933], [121.4671594, 31.2434778], [121.4667107, 31.2467339], [121.48578, 31.2230171], [121.4722333, 31.2496014], [121.4535671, 31.2421067], [121.4577464, 31.2445246], [121.4517224, 31.2422913], [121.4532178, 31.2420594], [121.4544354, 31.2477902], [121.4544425, 31.2462026], [121.4548525, 31.2453263], [121.4513227, 31.2480171], [121.4514783, 31.2478191], [121.4527485, 31.2462398], [121.448384, 31.2436867], [121.4560469, 31.2459217], [121.4497717, 31.2465809], [121.4498481, 31.2466832], [121.4542476, 31.2407354], [121.4541369, 31.2398476], [121.4543386, 31.239454], [121.4544406, 31.2393369], [121.4548061, 31.2386359], [121.4554255, 31.2377038], [121.4555393, 31.2377669], [121.4547747, 31.2394368], [121.4544794, 31.2400748], [121.4568394, 31.2405011], [121.4537551, 31.240483], [121.4693926, 31.2380997], [121.4586732, 31.2424289], [121.4581168, 31.2435092], [121.4582395, 31.2429141], [121.4820862, 31.2145609], [121.4824443, 31.2152357], [121.4813915, 31.2167789], [121.4822021, 31.217215], [121.4819177, 31.217664], [121.4813021, 31.2186606], [121.4875723, 31.2190203], [121.4814866, 31.2415603], [121.4724208, 31.2231534], [121.4710178, 31.2348628], [121.4579793, 31.2486484], [121.483627, 31.2336483], [121.4857071, 31.234219], [121.4874383, 31.2350569], [121.4868555, 31.236542], [121.4868523, 31.2365213], [121.4869578, 31.2479922], [121.4874922, 31.2483233], [121.4882851, 31.2491011], [121.4886587, 31.2495161], [121.4890706, 31.2499284], [121.4893596, 31.2501275], [121.4898834, 31.2284035], [121.4886704, 31.2273897], [121.488503, 31.2281566], [121.4504885, 31.2260885], [121.4522991, 31.2257005], [121.4554266, 31.2257548], [121.4576349, 31.2470546], [121.457666, 31.2472052], [121.4830036, 31.229724], [121.4830001, 31.2322534], [121.483284, 31.231208], [121.4829329, 31.2310403], [121.479643, 31.2331922], [121.4784629, 31.2333862], [121.4780899, 31.232932]]// 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照M.forEach(function(marker) {new AMap.Marker({map: map,icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-1.png',position: [marker[0], marker[1]],offset: new AMap.Pixel(-13, -30)});});var center = map.getCenter();var centerText = '当前中心点坐标：' + center.getLng() + ',' + center.getLat();// 添加事件监听, 使地图自适应显示到合适的范围AMap.event.addDomListener(document.getElementById('setFitView'), 'click', function() {var newCenter = map.setFitView(); });
</script>
</body>
</html>

高德地图自适应多经纬度标记相关推荐

Python调用高德地图API实现经纬度换算、地图可视化
作者 | 糖甜甜甜出品 | 经管人学数据分析 Python调用高德地图API实现经纬度换算.地图可视化前地图可视化的工具和函数比较多,但是在不知道相关地点经纬度的情况下,通过python调用高德地 ...
高德地图定位传值经纬度坐标为null,null
高德地图定位传值经纬度坐标为null,null 因为传null导致切割字符串时崩溃,所以要加上非空判断 if (amapLocation.getLatitude() != 0 && a ...
python 根据经纬度调取和显示地图_Python调用高德地图API实现经纬度换算、地图可视化-站长资讯中心...
目前地图可视化的工具和函数比较多,但是在不知道相关地点经纬度的情况下,通过python调用高德地图API实现经纬度换算,并且直接在高德地图新推出的轻量级可视化平台上实现一键式地图可视化,这其中需要申请 ...
python高德地图api调用实例_Python 利用高德地图api实现经纬度与地址的批量转换...
我们都知道,可以使用高德地图api实现经纬度与地址的转换.那么,当我们有很多个地址与经纬度,需要批量转换的时候,应该怎么办呢? 在这里,选用高德Web服务的API,其中的地址/逆地址编码,可以实现经纬 ...
你还在为高德地图找不到门牌号等详细地址而烦恼吗？你还在等什么——Python调用高德地图API实现经纬度换算、地图可视化
Python调用高德地图API实现经纬度换算.地图可视化前地图可视化的工具和函数比较多,但是在不知道相关地点经纬度的情况下,通过python调用高德地图API实现经纬度换算,并且直接在高德地图新推出 ...
python调用高德地图api 可视化_Python调用高德地图API实现经纬度换算、地图可视化...
前地图可视化的工具和函数比较多,但是在不知道相关地点经纬度的情况下,通过python调用高德地图API实现经纬度换算,并且直接在高德地图新推出的轻量级可视化平台上实现一键式地图可视化,这其中需要申请密 ...
android 高德地图定位获取经纬度
android 高德地图定位获取经纬度之前开发定位都是集成百度的,领导说要用高德的,没办法干吧,官方的文档太详细了看着真累. 我们得先去官网注册开发者账号,创建应用,填写自己项目的包名和SHA1, ...
html 高德地图坐标,百度地图，高德地图，HTML5经纬度比较
对于一个地点的经纬度,是确定的?这个问题,我想很多人都会回答,肯定了,可实际上呢?我只能呵呵了. 在使用百度地图的过程中,发现一个很奇怪的现象,有时候调用百度地图js API时,后得到一个错的离谱的地 ...
C# 调用高德地图API获取经纬度以及定位，JS获取定位【万字详解附完整代码】
最近有个需求,需要用到定位,本来打算用百度地图API定位,但是发现百度地图定位申请AppKey太麻烦了.因为是写的web端,百度地图定位API申请的Appkey需要网址过滤.索性就用高德定位了(有一说 ...

高德地图自适应多经纬度标记

一、效果图

二、高德API网址：

三、JavaScript代码

1. 关键代码

2.完整代码

高德地图自适应多经纬度标记相关推荐

最新文章

热门文章