查看: 2826|回复: 0

[DIV/CSS] 美食地图-高德地图研究记录

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

在调用高德javascriptAPI的基础上,修改marker样式,填充内容,处理点击markerClick事件,调用公交、步行、自驾三种路线规则接口。界面从无到有,自己规划界面,但成品美观上过不了企划眼,仍需加油努力才行

  1. <div id="wrap">
  2. <div id="mapDiv"></div><!-- 地图容器 -->
  3. <div id="panel" style="display:none;"></div>
  4. <a href="javascript:void(0);" class="hidden-road-line">关闭路线</a>
  5. <a href="javascript:void(0);" class="show-road-line">显示路线</a>
  6. <a href="javascript:void(0);" class="user-map">显示我的足迹</a>
  7. <a href="javascript:void(0);" class="shop-lists">商家信息</a>
  8. <div class="button-content" style="display:none;" id="roadStyle">
  9. <p style="text-align:right;padding-right:5px;">
  10. <span onClick="closeAddressWindow();">X</span>
  11. </p>
  12. <p class="f18">到这里去</p>
  13. <input type="text" placeholder="请输入起点" id="beginAddress"/>
  14. <br/>
  15. <input type="button" class="button" value="公交" onclick="transfer();"/>
  16. <input type="button" class="button" value="步行" onclick="walking();"/>
  17. <input type="button" class="button" value="自驾" onclick="driving();"/>
  18. </div>
  19. </div>
  20. //初始化地图
  21. var map = new AMap.Map('mapDiv', {
  22. resizeEnable: true,
  23. zoom:11,
  24. center: [113.360975,23.125178]
  25. });
  26. map.setMapStyle('amap://styles/78b63097b9675c8e575c705678348ac4');
  27. //后续数据处理
复制代码

美食地图

点击红旗图标显示对应商家优惠信息

马上出发

路线规则

商家信息列表页



回复

使用道具 举报