高德地图-初始化的时候获取行政区边界和中心点

官方API
https://editor.csdn.net/md/?not_checkout=1

思路：
1、后台返回城市或着通过IP地址自动定位城市
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 {width: 100%;height: 100%;}</style>
</head>
<body>
<div id="container"></div>
<script src="//webapi.amap.com/maps?v=2.0&key=您申请的key值"></script>
<script type="text/javascript">var map = new AMap.Map('container', {center: [116.306206, 39.975468],zooms: [2, 10],zoom:3});function getData(callback){AMap.plugin('AMap.DistrictSearch', function() {var search = new AMap.DistrictSearch();search.search('朝阳区', function(status, data) {console.log(JSON.parse(data))if (status === 'complete') {var positions = []var provinces = data['districtList'][0]['districtList']for (var i = 0; i < provinces.length; i += 1) {positions.push({center: provinces[i].center,radius:Math.max(2, Math.floor(Math.random() * 10))})}callback(positions)}});});}function addLayer(positions){var canvas = document.createElement('canvas');var customLayer = new AMap.CustomLayer(canvas, {zooms: [3, 10],zIndex: 120});var onRender = function(){var retina = AMap.Browser.retina;var size = map.getSize();//resizevar width = size.width;var height = size.height;canvas.style.width = width+'px'canvas.style.height = height+'px'if(retina){//高清适配width*=2;height*=2;}canvas.width = width;canvas.height = height;//清除画布var ctx = canvas.getContext("2d");ctx.fillStyle = '#08f';ctx.strokeStyle = '#fff';ctx.beginPath();for (var i = 0; i < positions.length; i += 1) {var center = positions[i].center;var pos = map.lngLatToContainer(center);var r = positions[i].radius;if(retina){pos = pos.multiplyBy(2);// pos.x *= 2;// pos.y *= 2;r*=2}ctx.moveTo(pos.x+r, pos.y)ctx.arc(pos.x, pos.y, r, 0, 2*Math.PI);}ctx.lineWidth = retina?6:3ctx.closePath();ctx.stroke();ctx.fill();}customLayer.render = onRender;customLayer.setMap(map);}getData(addLayer);</script>
</body>
</html>

高德地图-初始化的时候获取行政区边界和中心点相关推荐

前端系列——vue2+高德地图web端开发（行政区边界绘制）
vue2+高德地图web端开发(行政区边界绘制) 前言原理基础实现步骤 1.eslint设置AMap为全局变量放置报错 2.Search.vue传输给MapContainer.vue数据然后进行 ...
VUE2.0实现高德地图选择地点后进行行政区边界划分
最终效果图: 最终效果达到选择全部就描绘当前级联选择框下面的所有行政区,第二级开始描绘上一层加当前所有行政区预备知识: vue2.0.组件间传值.高德地图API(提前去高德地图提供的服务处申请好ke ...
java aoi 服务器地图_GitHub - WanZixin/getShp: 利用高德地图web服务API获取坐标串，生成行政区和aoi的shp文件...
爬取数据生成shp文件 1.功能简介共有两大功能,一个功能是根据高德地图web服务API获取行政区划坐标串,写入行政区shp文件:另一个功能是根据高德地图的接口获取poi坐标串,写入aoi(area ...
百度地图获取行政区边界坐标
输入行政区名称,获取相应的行政区边界坐标 <!DOCTYPE html> <html><head><meta http-equiv="Content ...
java使用高德地图根据IP地址获取城市
话不多说!直奔主题既然是根据IP,首先肯定是先要获取IP地址的,以下代码是获取IP地址,部署到服务器上去后会获取到公网的IP不是服务器的本机IP:是通过HttpServletRequest获取注: ...
高德地图怎么根据定位点获取附近的唯一道路名称？
今天公众号后台有小伙伴问题一个问题,刚好另一篇推文还没这么快,那就先插个队吧. 问题如题所示:高德地图怎么根据定位点获取附近的唯一道路名称? 这个小伙伴应该是看了强哥之前的写过的<高德地图根据输 ...
android中高德地图定位功能并且获取定位的城市
一.概述今天再一次用到了地图定位功能和地图显示功能,以前一直用的是高德地图定位,这次还是用高德,记录一下以便以后再做时方便一些.因为业务需要的功能不是很全,可以参考https://www.2cto. ...
基于vue 2.X和高德地图的vue-amap组件获取经纬度
今天我就讲了一下怎么通过vue和高德地图开发的vue-amap组件来获取经纬度. 这是vue-amap的官网文档:https://elemefe.github.io/vue-amap/#/ 这是我的码 ...
高德地图-初始化地图
1.问题背景利用高德地图的接口,创建一个以武汉为中心点的地图,放大级别是18 2.实现源码 <!DOCTYPE html> <html><head><tit ...

高德地图-初始化的时候获取行政区边界和中心点

高德地图-初始化的时候获取行政区边界和中心点相关推荐

最新文章

热门文章