高德地图

Posted 2020-10-05 小V_chen

tags:

篇首语：本文由小常识网(cha138.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">
    <title>基本地图展示</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
    <script src="http://webapi.amap.com/maps?v=1.3&key=85cc326732784c5923d9611200abd980"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container" style="width:500px; height:300px"></div>

<script>
    var map = new AMap.Map(‘container‘, {
        resizeEnable: true,
        zoom:12,
        center: [113.27199,23.131473]
    });

    var marker = new AMap.Marker({
        position: [113.270187,23.13167],
        title:"测试点"
    });
    marker.setMap(map);
    
</script>
</body>
</html>

加载地图，标注多个点

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <style type="text/css">
      body,html,#container{
        height: 500px; width: 500px;
        margin: 0px;
        font:12px Arial;
      }
      .taiwan{
          border: solid 1px red;
          color: red;
          float: left;
          width: 50px;
          background-color: rgba(255,0,0,0.1)
      }
    </style>
    <title>Marker example</title>
  </head>
  <body>
   <div id="container" tabindex="0"></div>
   <script src="https://webapi.amap.com/js/marker.js"></script>
   <script src="https://webapi.amap.com/maps?v=1.4.0&key=您申请的key值"></script>
   <script type="text/javascript">
  
        var map = new AMap.Map(‘container‘,{resizeEnable: true,zoom:4});
        var markers = []; //province见Demo引用的JS文件
        for (var i = 0; i < provinces.length; i += 1) {
                var marker;
                if (provinces[i].type === 0) {
                    var icon = new AMap.Icon({
                        image: ‘https://vdata.amap.com/icons/b18/1/2.png‘,
                        size: new AMap.Size(24, 24)
                    });
                    marker = new AMap.Marker({
                        icon: icon,
                        position: provinces[i].center.split(‘,‘),
                        offset: new AMap.Pixel(-12,-12),
                        zIndex: 101,
                        title: provinces[i].name,
                        map: map
                    });
                } else {
                    marker = new AMap.Marker({
                        position: provinces[i].center.split(‘,‘),
                        title: provinces[i].name,
                        map: map
                    });
            if (provinces[i].type === 2) {
                      var content= "<div class = ‘taiwan‘>宝岛台湾</div>";
                      baodao = new AMap.Marker({
                          content: content,
                          position: provinces[i].center.split(‘,‘),
                          title: provinces[i].name,
                          offset: new AMap.Pixel(0,0),
                          map: map
                      });
            }
                }
                markers.push(marker);
            }
              map.setFitView();
    </script>
    <script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>
  </body>
</html>

以上是关于高德地图的主要内容，如果未能解决你的问题，请参考以下文章

iframe嵌入高德地图出现崩溃

高德地图怎样实现实时定位，得到当前地点的坐标，位置

高德地图怎么定位javascript

高德地图API的搜索问题：怎么在我输入地名后地图精确到街道？

HTML5怎么用高德地图API返回当前位置的经纬度