查看: 273|回复: 0

[DIV/CSS] 高德地图javascriptAPI笔记

发表于 2018-2-13 08:00:02

进行轨迹信息小红旗标位,点击小红旗进行信息窗口响应,用户足迹连线处理,调用高德地图公交、步行、自驾路线规则,测试过程暂绑定固定数据,可优化为真实数据,并可由用户自行输入起点和终点进行路线规则。

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  7. <title>高德地图javascriptAPI笔记</title>
  8. <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
  9. <script type="text/javascript" src = 'https://webapi.amap.com/maps?v=1.4.0&key=您申请的key值&plugin=AMap.AdvancedInfoWindow'></script>
  10. <style type="text/css">
  11. #panel {
  12. position: absolute;
  13. background-color: white;
  14. max-height: 80%;
  15. overflow-y: auto;
  16. top: 10px;
  17. right: 10px;
  18. width: 250px;
  19. border: solid 1px silver;
  20. }
  21. div.amap-geo{display:none;}
  22. div.button-group{bottom:-10px;}
  23. div.amap-info-combo .tab{border:0}
  24. </style>
  25. <body>
  26. <div id='container'></div>
  27. <div id="panel" style="display:none;">
  28. </div>
  29. <div id="tip" style="display:none;"></div><!--修改为block就可以定位信息-->
  30. <div class="button-group">
  31. <input type="button" class="button" value="公交" onclick="transfer();"/>
  32. <input type="button" class="button" value="步行" onclick="walking();"/>
  33. <input type="button" class="button" value="自驾" onclick="driving();"/>
  34. <input type="button" class="button" value="信息窗体" onclick="openWindow();"/>
  35. </div>
  36. <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  37. <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
  38. <script src="https://webapi.amap.com/ui/1.0/main.js"></script>
  39. <script type="text/javascript">
  40. /***************************************
  41. 由于Chrome、IOS10等已不再支持非安全域的浏览器定位请求,为保证定位成功率和精度,请尽快升级您的站点到HTTPS。
  42. ***************************************/
  43. var map, geolocation;
  44. //加载地图,调用浏览器定位服务
  45. map = new AMap.Map('container', {
  46. resizeEnable: true,
  47. zoom:11,
  48. center: [113.360975,23.125178]
  49. });
  50. //给坐标商家位置插上小红旗,点击显示商家信息 begin
  51. var lnglats= [
  52. [113.324587, 23.106487],
  53. [113.325548, 23.106547],
  54. [113.325451,23.106273],
  55. [113.324976,23.105754],
  56. [113.324719,23.106126],
  57. [113.326033,23.106427],
  58. [113.323588,23.106363],
  59. [113.324446,23.10507],
  60. [113.324462,23.106264],
  61. [113.323223,23.106649],
  62. [113.321586,23.104557],
  63. [113.322136,23.107039]
  64. ];
  65. var data = ['广州小蛮腰','名人馆','石头记','甜品店','广州手信','东门','广州手信','广州手信','广州手信','广州手信','广州手信','广州手信'];
  66. var shopInfo = [
  67. '广州小蛮腰<br/>广州小蛮腰202793800<br/><img src="./flag_mark_red.png"/>广州小蛮腰202793800',
  68. '<span style="color:red;">名人馆</span>',
  69. '石头记',
  70. '甜品店',
  71. '广州手信',
  72. '东门',
  73. '广州手信',
  74. '广州手信',
  75. '广州手信',
  76. '广州手信',
  77. '广州手信',
  78. '广州手信',
  79. ];
  80. var discount = ['门票3折','门票5折','6折','2折','4折','7折'];
  81. //添加点标记,并使用自己的icon
  82. for(var i= 0;i<lnglats.length;i++) {
  83. var marker = new AMap.Marker({
  84. map: map,
  85. position: lnglats[i],
  86. title: data[i],
  87. icon: new AMap.Icon({
  88. size: new AMap.Size(40, 40), //图标大小
  89. image: "http://www.easyicon.net/api/resizeApi.php?id=555380&size=24",
  90. imageOffset: new AMap.Pixel(6, 10)
  91. })
  92. });
  93. marker.content = data[i];
  94. marker.shopInfo = shopInfo[i];
  95. marker.on('click', markerClick);
  96. // 设置label标签
  97. marker.setLabel({//label默认蓝框白底左上角显示,样式className为:amap-marker-label
  98. offset: new AMap.Pixel(-12, -12),//修改label相对于maker的位置
  99. content: discount[i],
  100. });
  101. }
  102. function markerClick(e) {
  103. //设置DomLibrary,jQuery或者Zepto
  104. AMapUI.setDomLibrary($);
  105. //加载SimpleInfoWindow,loadUI的路径参数为模块名中 'ui/' 之后的部分
  106. AMapUI.loadUI(['overlay/SimpleInfoWindow'], function(SimpleInfoWindow) {
  107. var infoWindows = new SimpleInfoWindow({
  108. infoTitle: '<strong>'+e.target.content+'</strong>',
  109. infoBody: '<p>'+e.target.shopInfo+'</p>'
  110. });
  111. //显示在map上
  112. infoWindows.open(map, e.target.getPosition());
  113. });
  114. }
  115. map.setFitView();
  116. //给坐标商家位置插上小红旗,点击显示商家信息 end
  117. //用户消费商家轨迹 begin
  118. var lineArr = [
  119. [113.324587, 23.106487],
  120. [113.325548, 23.106547],
  121. [113.325451,23.106273],
  122. [113.324976,23.105754],
  123. [113.324719,23.106126],
  124. [113.326033,23.106427],
  125. [113.322136,23.107039]
  126. ];
  127. var polyline = new AMap.Polyline({
  128. path: lineArr, //设置线覆盖物路径
  129. strokeColor: "#3366FF", //线颜色
  130. strokeOpacity: 1, //线透明度
  131. strokeWeight: 6, //线宽
  132. strokeStyle: "solid", //线样式
  133. strokeDasharray: [10, 5], //补充线样式
  134. bubble: true,
  135. lineJoin: 'round',
  136. showDir: true
  137. });
  138. polyline.setMap(map);
  139. //用户消费商家轨迹 end
  140. //定位功能 begin
  141. /*
  142. map.plugin('AMap.Geolocation', function() {
  143. geolocation = new AMap.Geolocation({
  144. enableHighAccuracy: true,//是否使用高精度定位,默认:true
  145. timeout: 10000, //超过10秒后停止定位,默认:无穷大
  146. buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
  147. zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
  148. buttonPosition:'LB'
  149. });
  150. map.addControl(geolocation);
  151. geolocation.getCurrentPosition();
  152. AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
  153. AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息
  154. });
  155. //解析定位结果
  156. var thisAddress = "";
  157. function onComplete(data) {
  158. var str=['定位成功'];
  159. str.push('经度:' + data.position.getLng());
  160. str.push('纬度:' + data.position.getLat());
  161. thisPosition = [data.position.getLng(),data.position.getLat()];
  162. if(data.accuracy){
  163. str.push('精度:' + data.accuracy + ' 米');
  164. }//如为IP精确定位结果则没有精度信息
  165. str.push('是否经过偏移:' + (data.isConverted ? '是' : '否'));
  166. str.push('地址:'+ data.formattedAddress);
  167. thisAddress = data.formattedAddress;
  168. document.getElementById('tip').innerHTML = str.join('<br>');
  169. }
  170. //解析定位错误信息
  171. function onError(data) {
  172. document.getElementById('tip').innerHTML = '定位失败';
  173. }
  174. */
  175. //定位功能 end
  176. //窗口导航
  177. function openWindow(){
  178. clearMap();
  179. var lnglat = [113.31621,23.12698];
  180. var content='';
  181. var infowindow1 = new AMap.AdvancedInfoWindow({
  182. content: content,
  183. asDestination: true,
  184. asOrigin: false,
  185. placeSearch: false,
  186. autoMove: true,
  187. offset: new AMap.Pixel(0, -30),
  188. panel: panel,
  189. closeWhenClickMap: true
  190. });
  191. infowindow1.open(map,lnglat);
  192. $("#panel").css("display","block");
  193. }
  194. function transfer(){
  195. $("#hideRoad").css("display","block");
  196. clearMap();
  197. /*
  198. * 调用公交换乘服务
  199. */
  200. //加载公交换乘插件
  201. AMap.service(["AMap.Transfer"], function() {
  202. var transOptions = {
  203. map: map, //指定地图对象,设置此参数后,路线规划结果将自动绘制在地图中
  204. city: '广州市', //公交城市
  205. panel:'panel', //用于显示路线指引信息的Div容器的id或Div元素,提供此参数后,路线指引信息将在此容器中进行展示。可选值
  206. //cityd:'乌鲁木齐', //终点城市
  207. policy: AMap.TransferPolicy.LEAST_TIME //乘车策略
  208. };
  209. //构造公交换乘类
  210. var trans = new AMap.Transfer(transOptions);
  211. //根据起、终点坐标查询公交换乘路线
  212. trans.search([{keyword:'广东省广州市天河区冼村街道'},{keyword:'广州南站'}], function(status, result){
  213. });
  214. $("#panel").css("display","block");
  215. });
  216. }
  217. function walking() {
  218. $("#hideRoad").css("display","block");
  219. clearMap();
  220. /*
  221. * 调用步行路线服务
  222. */
  223. //加载步行路线插件
  224. AMap.service(["AMap.Walking"], function () {
  225. var transOptions = {
  226. map: map,
  227. city: '广州市',
  228. panel: 'panel',
  229. };
  230. //构造公交换乘类
  231. var walking = new AMap.Walking(transOptions);
  232. //根据起、终点坐标查询步行换乘路线
  233. walking.search([{keyword: '广东省广州市天河区冼村街道'}, {keyword: '广州南站'}], function (status, result) {
  234. //TODO 解析返回结果,自己生成操作界面和地图展示界面
  235. });
  236. $("#panel").css("display", "block");
  237. });
  238. }
  239. function driving(){
  240. $("#hideRoad").css("display","block");
  241. clearMap();
  242. /*
  243. * 调用自驾路线服务
  244. */
  245. //加载自驾路线插件
  246. AMap.service(["AMap.Driving"], function() {
  247. var transOptions = {
  248. map: map,
  249. city: '广州市',
  250. panel:'panel',
  251. policy: AMap.DrivingPolicy.LEAST_TIME
  252. };
  253. //构造自驾路线类
  254. var driving = new AMap.Driving(transOptions);
  255. //根据起、终点坐标查询自驾路线
  256. driving.search([{keyword:'广东省广州市天河区冼村街道'},{keyword:'广州南站'}], function(status, result){
  257. });
  258. $("#panel").css("display","block");
  259. });
  260. }
  261. //清除地图
  262. function clearMap(){
  263. map.clearMap();
  264. $("#panel").css("display","none");
  265. $("#panel").html("");
  266. }
  267. </script>
  268. </body>
  269. </html>
复制代码


回复

使用道具 举报