HTML高德地图标点

最新推荐文章于 2024-05-19 22:05:56 发布

Like_world

最新推荐文章于 2024-05-19 22:05:56 发布

阅读量1.4k

点赞数

分类专栏： Python代码小模块文章标签： html

本文链接：https://blog.csdn.net/qq_30008595/article/details/103856336

版权

Python代码小模块专栏收录该内容

7 篇文章 0 订阅

订阅专栏

代码内容

输入：

一堆经纬度坐标，例如：
[[104.104527, 30.659551], [104.084189, 30.663919], [104.079991, 30.678775]]

输出：

在地图上标出这些经纬度坐标

代码：

输入在46行

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <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://webapi.amap.com/maps?v=1.4.11&key=a2240106a62525c7221253bb7a180f65"></script>
  <script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<style type="text/css">
  #container {
    height: 800px;
    width: 100%;
  }

  .amap-icon img{
    width: 25px;
    height: 34px;
  }
</style>

<body>
  <div >
    <div data-role="page" id="mainpage" class="ui-content">
    <div data-role="header">
      <div data-role="navbar">
      </div>
    </div>
      <div id="container"></div>

 </div> 
  </div>

  <script type="text/javascript">
    //加载地图
    var map = new AMap.Map('container', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom:11, //初始化地图层级
    });

    //坐标数组 
    //var path = [[104.104527, 30.659551], [104.086479187012, 30.6557445526123], [104.110291, 30.71844], [104.080457, 30.668807], [104.080457, 30.668807], [104.090585, 30.671722], [104.08572252856, 30.662840563632], [104.08572252856, 30.662840563632], [104.076434, 30.67328], [104.081108, 30.66643], [104.09315694081, 30.670072326943], [104.088012, 30.657429], [104.075574, 30.672195], [104.113449, 30.641524], [104.092319, 30.655403], [104.092319, 30.655403], [104.088151, 30.655153], [104.08581, 30.658125], [104.08581, 30.658125], [104.085815, 30.662834], [104.083815565742, 30.6627484299404], [104.083815565742, 30.6627484299404]];
    var path = [[104.104527, 30.659551], [104.084189, 30.663919], [104.079991, 30.678775], [104.078404, 30.656772], [104.089517, 30.668019], [104.078018, 30.654471], [104.085704, 30.664888], [104.078018, 30.654471], [104.07990255983, 30.663601659943], [104.117503, 30.676797], [104.102088, 30.656456], [104.102088, 30.656456], [104.081108, 30.66643], [104.0721, 30.61139], [104.090191, 30.65433], [104.11801, 30.643378], [104.080754, 30.668583], [104.066259, 30.682756]]

    var polyline = new AMap.Polyline({
        path: path,
        isOutline: true,
        outlineColor: '#ffeeff',
        borderWeight: 3,
        strokeColor: "#FF3000", 
        strokeOpacity: 1,
        strokeWeight: 6,
        strokeStyle: "solid",
        strokeDasharray: [10, 5],
        lineJoin: 'round',
        lineCap: 'round',
        zIndex: 50,
    })

    polyline.setMap(map)
    // 缩放地图到合适的视野级别
    map.setFitView([ polyline ])


   //绘制坐标点    
   AMapUI.loadUI(['overlay/SimpleMarker'], function(SimpleMarker) {
        for (var i = 0, len = path.length; i < len; i++) {
        new SimpleMarker({
        //前景文字
        iconLabel: {
                innerHTML: i+1,
                style: {
                  color: '#fff',
                  fontSize: '120%',
                  marginTop: '2px'
                }
              },
        //图标主题
        iconTheme: 'default',
        //背景图标样式
        iconStyle: 'green',
        map: map,
        position: path[i]
        });
      }
  });

   
    
      

</script>

</body>

</html>

Like_world

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
HTML高德地图标点

代码内容输入：一堆经纬度坐标，例如：[[104.104527, 30.659551], [104.084189, 30.663919], [104.079991, 30.678775]]输出：在地图上标出这些经纬度坐标代码：输入在46行<!DOCTYPE html><html><head> <meta charset="utf-8"...
复制链接

扫一扫