Js地图路线规划以及点击获取经纬度

简介: Js地图路线规划以及点击获取经纬度

废话不多说,直接上代码。

代码script引用链接链接来自高德地图开放平台。(高德开放平台 | 高德地图API (amap.com)

<!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">
  <script type="text/javascript">
    window._AMapSecurityConfig = {
      securityJsCode: "你的安全密钥",
    };
  </script>
  <title>位置经纬度 + 驾车规划路线</title>
  <style type="text/css">
    html,
    body,
    #container {
      width: 92%;
      height: 100%;
    }
 
    #panel {
      position: fixed;
      background-color: white;
      max-height: 90%;
      overflow-y: auto;
      top: 10px;
      right: 10px;
      width: 280px;
    }
 
    #panel .amap-call {
      background-color: #009cf9;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }
 
    #panel .amap-lib-driving {
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      overflow: hidden;
    }
  </style>
  <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
  <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
 
  <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
 
<body>
  <div id="container"></div>
  <div id="panel"></div>
  <div class="input-card">
    <h4 style="line-height: 16px;margin: 10px;">左击获取经纬度:</h4>
    <div class="input-item">
      <input type="text" readonly="true" id="lnglat">
    </div>
  </div>
  <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=你的key值&plugin=AMap.Driving"></script>
  <script type="text/javascript">
    //基本地图加载
    var map = new AMap.Map("container", {
      resizeEnable: true,
      center: [116.397428, 39.90923],//地图中心点
      zoom: 13 //地图显示的缩放级别
    });
    //构造路线导航类
    var driving = new AMap.Driving({
      map: map,
      panel: "panel"
    });
    // 根据起终点经纬度规划驾车导航路线
    driving.search(new AMap.LngLat(116.379028, 39.865042), new AMap.LngLat(116.427281, 39.903719), function (status, result) {
      // result 即是对应的驾车导航信息,相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
      if (status === 'complete') {
        log.success('绘制驾车路线完成')
        map.setCenter([116.442581,39.882498])
      } else {
        log.error('获取驾车数据失败:' + result)
      }
    });
  //为地图注册click事件获取鼠标点击出的经纬度坐标
  map.on('click', function(e) {
    document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
  });
  </script>
</body>
 
</html>

感谢观看!!!

相关文章
|
2月前
|
JavaScript 前端开发
js实现点击音频实现播放功能
js实现点击音频实现播放功能
|
7天前
|
测试技术 UED
断网之后的页面,Autox.js是点击还是上下滑动比较好?
断网之后的页面,Autox.js是点击还是上下滑动比较好?
|
1月前
|
JavaScript
JS图表生成以及点击修改图表样式
JS图表生成以及点击修改图表样式
|
1月前
|
存储 JavaScript 定位技术
|
26天前
|
JavaScript 容器
JS图表制作及点击按钮切换图表样式
JS图表制作及点击按钮切换图表样式
16 0
|
1月前
|
前端开发 JavaScript
js遍历添加栏目类添加css,再点击其它删除css
该文章介绍了使用JavaScript遍历添加和删除CSS类的方法。示例代码展示了如何在点击时为当前元素添加类,同时移除其他元素的类。其中包含两个示例:一是遍历`.radio-group .ckselect`并处理点击事件,二是实现点击`.zu-top-nav-userinfo`显示/隐藏`.peoples`层,并处理文档点击以关闭层。代码适用于网页交互效果的实现。
12 0
|
2月前
|
JavaScript
JS实现一键点击按钮复制文本
【5月更文挑战第6天】JS实现一键点击按钮复制文本
|
2月前
|
JavaScript 前端开发
JavaScript实现点击鼠标弹钢琴的效果
JavaScript实现点击鼠标弹钢琴的效果
13 0
|
2月前
|
JavaScript 前端开发
试读版:如何找出 SAP 标准 Fiori 应用某个按钮点击后执行的 JavaScript 源代码
试读版:如何找出 SAP 标准 Fiori 应用某个按钮点击后执行的 JavaScript 源代码
|
2月前
|
JavaScript
JS+CSS3点击粒子烟花动画js特效
JS+CSS3点击粒子烟花动画js特效
27 0
JS+CSS3点击粒子烟花动画js特效