地图开发实战案例:高德地图弧线连接线标注

HTML代码

<div id="container"></div>
<script src="//webapi.amap.com/maps?v=1.4.15&key=您申请的key值&"></script>
<script src="//webapi.amap.com/loca?v=1.3.2&key=您申请的key值"></script>
<script src="//a.amap.com/Loca/static/dist/jquery.min.js"></script>

javascript代码

 var map = new AMap.Map('container', {mapStyle: 'amap://styles/1de318cbb8d12c02303a22c550b9ccc9',features: ['bg', 'road'],center: [116.40866,39.87596],zoom: 11,pitch: 66,rotation: 45,viewMode: '3D'});var layer = new Loca.LinkLayer({map: map,fitView: false,});var d=[{"lnglat":[["116.309712","40.066607"],["116.286219","40.048605"]],"dis":1550}];//标注for (var i=0;i<2;i++){var marker = new AMap.Marker({position: d[0].lnglat[i],map: map})}layer.setData(d, {lnglat: 'lnglat'});layer.setOptions({blendMode: 'lighter',style: {// 曲率 [-1, 1] 区间curveness: function(data) {if(data.value.dis < 100){return 0.07;} else if(data.value.dis < 300){return 0.05;} else if(data.value.dis < 500){return 0.02;}  else if(data.value.dis < 700){return 0.01;} else {return 0.005;}},opacity: 0.8,color: '#5DFBF9'}});layer.render();

Done !

地图开发实战案例:高德地图弧线连接线标注相关推荐

java wed高德地图开发_java接入高德地图常用WEB API
1.先看一下高德地图WEB API都有哪些内容 2.根据经经纬度查询高德地图省市区数据 /** *根据经纬度获取省市区 * @param lat * @return */ public static ...
高德地图进阶开发实战案例(10):地图选取起终点OD位置经纬度的驾车规划路线
外部文件的引入 <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-ce ...
百度地图开发实战案例:根据起点和终点计算路程和时间
终点数据格式 //终点医院数据;var endData = [{id: 0, name: '南京市第一医院', lng: 118.79073, lat: 32.023645},{id: 1, name ...
AR+LBS街景实景红包PokemonGo游戏捉妖夺宝营销解决方案定制开发暨百度高德地图Unity插件SDK
AR+LBS街景实景红包PokemonGo游戏捉妖夺宝营销解决方案定制开发暨百度高德地图Unity插件SDK 作者 komstone https://blog.csdn.net/komstone/ar ...
高德地图开发（三、地图marker点标记）
高德地图开发(三.地图marker自定义点标记) 一.默认点标记二.自定义点标记一.默认点标记 // 创建一个 Marker 实例:var marker = new AMap.Marker({po ...
OpenLayers学习笔记高级篇（四、地图开发实战之地图要素的增删改查）
一切都准备好了,现在终于可以通过ol3加载配置好的数据了.上一节中最后的预览结果,大家已经看到了,此处我们自己通过ol来实现这个预览页面,直接上代码如下: 1.加载Geoserver发布的wfs地图服 ...
四维图新地图开发实战个人总结
四维图新地图开发实战个人总结综述本人去年开始接触四维图新(minedata.cn)的地图开发工作,目前已经对前端有较多实战开发经验地图渲染 1.引入地图资源 map.addSource('资源名 ...
js添加多marker 高德地图_web开发如何使用高德地图API（四）通过AMap.Marker自定义标点...
说两句: 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问). 我所整理的内容以实际项目为基础希望更有针对性的,更精简. 准备工作: 首先,注册开发者账号,成为高德开放平台开发者 ...
react 逆地理高德地图_react中使用高德地图的原生API
干货,无话 1.react-create-app,创建新react项目: 2.npm install react-amap,引入高德地图的封装: 3.编写组件index.js: import Reac ...
android高德地图获取海拔_高德地图如何查经纬度和海拔
展开全部高德地图测海拔的具体方法如下: 1.第一步打636f70793231313335323631343130323136353331333366306564开高德地图的网页,找到并点击下方那行小 ...

地图开发实战案例:高德地图弧线连接线标注

HTML代码

javascript代码

地图开发实战案例:高德地图弧线连接线标注相关推荐

最新文章

热门文章