高德的图创建实例记录

最新推荐文章于 2024-12-10 15:28:53 发布

Red_Liu

最新推荐文章于 2024-12-10 15:28:53 发布

阅读量223

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签：高德地图

本文链接：https://blog.youkuaiyun.com/u011442365/article/details/89330662

前端专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了如何使用高德地图API创建地图应用，包括地图初始化、标记位置、绘制圆形区域、显示信息窗口以及添加工具栏等功能。通过实例展示了地图样式设置、语言选择、自定义标记图标等高级操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <div id="lhwmap" style="width:800px;height:800px;"></div>

JS 部分：

<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=f301688cccdde2e101fc68571038a9b7"></script>
          <script type="text/javascript">
            var map = new AMap.Map('lhwmap', {
              resizeEnable: true,
              zoom: 10,
              center: [122.138567,37.424249],
              mapStyle: "amap://styles/grey",//可选值 ：normal，grey，dark
              lang: "zh_en" //可选值：en，zh_en, zh_cn
            });
            var marker = new AMap.Marker({
              position: [122.138567,37.424249],
              //icon 默认蓝色，被注释的是红色图标
              //icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png"
            });
            marker.setMap(map);
            var circle = new AMap.Circle({
              center: [122.138567,37.424249],
              redius: 100,
              fillOpacity: 0.1,
              fillColor: '#008c87',
              strokeColor: '#008c87',
              strokeWeight: 1
            });
            circle.setMap(map);
            map.setFitView();
            var info = new AMap.InfoWindow({
              content: '<div class="content" style="color:#4196ff;"><div class="tac"><img src="/uploads/allimg/181008/1.jpg" /></div>' +'<p><span>地址：</span>山东省山东省山东省山东省山东省</p><p><span>电话：</span>xxxx-xxxxxxx</p><p><span>邮箱：</span>xxxx@163.com</p>',
              offset: new AMap.Pixel(0, -28),
              size: new AMap.Size(300, 0)
            });
            info.open(map, marker.getPosition());
		   AMap.plugin(['AMap.ToolBar','AMap.Scale','AMap.OverView'],function(){
		            map.addControl(new AMap.ToolBar());
		            map.addControl(new AMap.Scale());
		            map.addControl(new AMap.OverView({isOpen:true}));
		    });
          </script>