高德地图开放平台

2018-02-03 10:31:17来源:oschina作者:xiaoge2016人点击

分享

平台地址:http://lbs.amap.com/api/javascript-api/example/amap-ui-districtcluster/custom-cluster-marker


在做之前得科普一下,百度和高德,谷歌的经纬度是有偏差的。


了解经纬度偏差原因(pc测试可先不考虑,高德地图api定位在移动端显示定位失败,故采用百度地图获取经纬度,然后传给高德api转化坐标):




高德地图坐标转换API


适用场景


为了使用高德服务,用户需要将非高德坐标转换为高德坐标。


地址:http://lbs.amap.com/api/webservice/guide/api/convert/


不同地图经纬度差异在线测试

地址:http://www.gpsspg.com/maps.htm


高德地图使用参考:
1.ul组件库:http://lbs.amap.com/api/javascript-api/reference-amap-ui/overlay/simplemarker

2.示例中心:http://lbs.amap.com/api/javascript-api/example/amap-ui-simplemarker/index

以下为demo:
map_demo.html代码







区划聚合+海量点展示+定位+自定义标记




















10w1.txt文件:
108.935398,34.256598,西安市1
108.926398,34.316598,西安市2
108.947398,34.351598,西安市3
108.868398,34.253598,西安市4
108.879398,34.246598,西安市5
108.981398,34.354598,西安市6
108.992398,34.256198,西安市7
map_common.css代码:
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0px;
}
#loadingTip {
position: absolute;
z-index: 9999;
top: 50%;
left: -50%;
padding: 3px 3px;
background: red;
color: #fff;
font-size: 14px;
border: none;
}
.amap-marker-label {
text-align: center;
padding:1rem;
width: 42px;
height: 42px;
background: rgba(55, 175, 55, 0.8);
color: #fff;
border-radius: 50%;
line-height:1.5rem;
border: 1px solid #fff;
font-size: 1rem;
}
.amap-icon {
width: 42px !important;
top: 0;
display: none;
}
.amap-icon img {
width: 42px !important;
height: 42px !important;
left: 0 !important;
visibility: hidden;
cursor: pointer;
}
.amap-toolbar {
display: none
}


展示效果如上图

注意:

1.高德地图示例也有聚合显示个数的,但是为网格聚合,按照面积计算,不适合用其为基础模板,应当选用带有海量展示点和的行政区域聚合


2.由于电脑和移动端屏幕可视区域不同,由缩放逻辑控制的显示情况可能会出现差异,可以通过meta标签里的


initial-scale=0.8

这个来修改


3.注意提供数据格式的拆分


var data = csv.split('/n');
data.split(',');

4.本示例通过隐藏样例的定位图标,将定位点的样式放大而写,你也可以通过重新书写标签样式来改变

以下为主要研究示例:



demo2-使用高德定位+公交规划:

map_demo2.html









区划聚合+海量点展示+定位+最近公交路线















点击查看最近公交路线



css,txt文件同,可本地环境打开显示

未解决疑问:

1.高德地图定位失败的原因


在高德地图-浏览器定位的官方文档上有这样的一句注释“/*************************************** 由于Chrome、IOS10等已不再支持非安全域的浏览器定位请求,为保证定位成功率和精度,请尽快升级您的站点到HTTPS。 ***************************************/”,不知道是不是和定位失败有关


另外,发现浏览器定位的时候,会有弹框提示问是否允许,只有点击确定才能定位,但有的浏览器没有提示弹框,或者用户第一次点击取消,之后怎么刷新都没有弹框确认定位,定位也就失败了。js中如何写定位提醒的弹框呢?


最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台