使用高德开放平台显示指定的坐标点和线

详细代码可参考：直接编辑运行可测试

折线的绘制和编辑-矢量图形-示例中心-JS API 示例 | 高德地图API

展示坐标点和道路线：直接作为http服务的结果返回即可前端展示了

<!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">
<style>
html,
body,
#container {
width: 100%;
height: 100%;
}
</style>
<title>压路服务结果查看</title>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<script src="https://webapi.amap.com/maps?v=1.4.15&key=你申请的key&plugin=AMap.PolyEditor"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
</head>
<body>
<div id="container"></div>
<div class="input-card" style="width: 120px">

</div>
<script type="text/javascript">
var map = new AMap.Map("container", {
center: [116.666193,39.877667],
zoom: 14
});

var path = [[116.66615,39.87746],[116.66626,39.8779]];

var polyline = new AMap.Polyline({
path: path,
isOutline: true,
outlineColor: '#ffeeff',
borderWeight: 1,
strokeColor: "#3366FF",
strokeOpacity: 1,
strokeWeight: 2,
// 折线样式还支持 'dashed'
strokeStyle: "solid",
// strokeStyle是dashed时有效
strokeDasharray: [10, 5],
lineJoin: 'round',
lineCap: 'round',
zIndex: 50,
})

polyline.setMap(map)
// 缩放地图到合适的视野级别
var circle = new AMap.Circle({
center: [116.666193,39.877667],
radius: 1, //半径
borderWeight: 4,
strokeColor: "#FF00FF",
strokeOpacity: 1,
strokeWeight: 2,
strokeOpacity: 2,
fillOpacity: 1,
strokeStyle: 'dashed',
strokeDasharray: [10, 10],
// 线样式还支持 'dashed'
fillColor: '#FF00FF',
zIndex: 50,
})

circle.setMap(map)
map.setFitView([ polyline ])
map.setFitView([ circle ])

</script>
</body>
</html>

使用高德开放平台显示指定的坐标点和线相关推荐

接入高德开放平台实现地址转换为经纬度坐标
高德地图API 1 地址转为经纬度后台人员填写完房源详情地址后,由此地址转为,电子地图中的经纬度.从而方便日后前台在电子地图中的标识显示. 高德地图开放平台:https://lbs.amap.co ...
mysql高德地图设计_基于高德开放平台Map Lab的数据可视化
在Map Lab上创建可视化项目,首先需要添加数据.添加数据有4种方式,分别是: 上传CSV文件添加数据上传Excel文件添加数据连接在线数据库添加数据提供在线数据API添加数据一.数据上传说 ...
在vue3+vite中引入高德开放平台API实现边界范围多边形的绘制
在vue3+vite中引入高德开放平台API实现边界范围多边形的绘制 1,先去高德地图开放平台申请账号注册流程不再赘述; 2,在我的应用中创建key,选择web端Js点击提交生成; 3,生成后可以看到 ...
python高德查询县_Python和高德开放平台——地名地址空间化及采集POI信息
上一篇我们介绍微博开放平台时说道了通过高德开放平台获取地名地址的坐标,今天我们来说一说怎么使用高德开放平台查询相关关键词的地址坐标,或者采集学校.医院.餐厅.公园.企业等POI的信息. 高德开放平台h ...
高德开放平台 - 学习/实践
1.应用场景借助高德开放平台进行项目的开发, 完成业务需要, 如地理编码. 2.学习/操作 2.1 介绍暂见: https://lbs.amap.com/dev/index //高德开放平台开 ...
高德开放平台实现区域地图+云图标记
在项目中需要使用类似GIS效果的地图,考虑到高德开放平台关于云图的便利性,便利用官网和网上的例子,进行了初步实现. 1.带3D效果: 2.代码: <!doctype html> <h ...
百度AI开放平台和高德开放平台的使用
目录 1.百度AI开放平台 1.1语音合成 1.2语音识别 1.3人脸识别 1.4文字识别 1.4.1手写文字识别 1.4.2 身份证识别 1.5人体检测 2.高德开放平台 2.1天气查询 2.2地理 ...
高德开放平台发布“GAIA计划”，打造“组件式”解决方案
今日,高德开放平台在北京举办2018战略说明会,正式对外发布了"GAIA计划",宣布将为合作伙伴提供针对包括网约车.海外.货运.游戏等行业"组件式"的垂类解决方 ...
高德开放平台与360儿童手表达成合作，全球数据助力第三方企业
3月29日下午,国内互联网安全企业 360 对外发布了全新儿童春季智能新品.360 儿童手表与国内领先的 LBS 服务提供商高德开放平台达成合作,可通过定位等多项功能,让家长随时掌握孩子的动态,保障儿 ...
高德开放平台定位功能对接
[高德开放平台] 定位对接萌璐琉璃 https://www.jianshu.com/p/312287e25444 目标对接高德开放平台的定位接口依赖 <!-- httpclient 工具类 ...

使用高德开放平台显示指定的坐标点和线

使用高德开放平台显示指定的坐标点和线相关推荐

最新文章

热门文章