高德地图JSapi

简介: 1.js显示地图    /* 选择容器;设置地图的中心点,并标记 */ var marker, map = new AMap.

1.js显示地图 

<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/><!-- 引入高德地图的样式 -->

 

 <script src="http://webapi.amap.com/maps?v=1.3&key=aafdf4a9edda043681ff641e6d9b9ee8"></script><!-- 传入key -->
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script><!-- 引入高德地图js文件 -->
<div id="container" style="width:49%;height: 80%;"></div><!--放置地图的div  -->
<div id="container2" style="width:49%;height: 80%;"></div> 
/* 选择容器;设置地图的中心点,并标记 */
        var marker, map = new AMap.Map("container", {
            resizeEnable: true,
            center: [114.290924,30.601394],
            zoom: 13
        }); 
        /* 设置地图的中心点,并标记 */
        var marker2, map2 = new AMap.Map("container2", {
            resizeEnable: true,
            center: [114.290924,30.601394],
            zoom: 13
        }); 

2.点击获取地图经纬度坐标;创建marker点

    /* 点击获取地图坐标 */
        var clickEventListener = map.on('click', function(e) {
           document.getElementById("xy").value = e.lnglat.getLng() + ',' + e.lnglat.getLat(); 
          /* 点击一次新增一个标记点 */
             var marker= new AMap.Marker({
                map:map,
                position:[e.lnglat.getLng(),e.lnglat.getLat()]
                 });                
        });

3.在地图上绘制多边形折线

  //在地图上绘制折线
        var editor={};
        editor._polygon=(function(){
            return new AMap.Polygon({
                map: map,
                path: lineArr,/* 这里是一个数组; */
                strokeColor: "#0000ff",
                strokeOpacity: 1,
                strokeWeight: 3,
                fillColor: "#CD2626",
                fillOpacity: 0.35
            });
        })();
        map.setFitView();        
        editor._polygonEditor= new AMap.PolyEditor(map, editor._polygon);

第二种绘制图形

// 绘制轨迹
                             var polyline = new AMap.Polyline({
                                map: map,
                                path: lineArr,/* 这里是坐标数组 */
                                strokeColor: "red",  //线颜色
                                strokeOpacity: 1,     //线透明度
                                strokeWeight: 1,      //线宽
                                strokeStyle: "solid"  //线样式
                            });                             
                            map.setFitView();    
                            /*  将画线的区域渲染颜色*/
                            var polygon = new AMap.Polygon({
                                map: map,
                                fillOpacity:0.4,
                                path: lineArr
                            });    

4.开始编辑多边形;结束编辑多边形

    /* 开始编辑 */
        editor.startEditPolygon=function(){
            editor._polygonEditor.open();
        }
        /*结束编辑 */
        editor.closeEditPolygon=function(){
            /* 结束编辑时会自动将坐标全部存在数组内
                ;将数组转为字符串,以#号分隔 */
          var  arg = lineArr.join("#");
          document.getElementById("arg").value=arg+"#"; /* 这里是将数组转成的字符串存起来 */
          editor._polygonEditor.close();
        }

5.清除标记的方法

map.clearMap();

6,当时为了去除地图上的样式,起到刷新地图的效果;没有找到更好的方法,选择的重新加载一遍地图。覆盖之前的;也就是在div里重新加载一次;

7,自定义图标以及样式

    marker= new AMap.Marker({
                            title:name,/* 鼠标放上去显示的标题 */
                            map: map,
                            position: arr,/*  坐标数组*/
                            icon: new AMap.Icon({            
                                size: new AMap.Size(50,50),  //图标大小
                                image: "static/img/1.png",/*图片路径  */
                                imageOffset: new AMap.Pixel(0,0)/* 偏移量 */
                                        })        
                                });
            
                        marker.setLabel({//label默认蓝框白底左上角显示,样式className为:amap-marker-label;可以在css样式里调整
                            offset: new AMap.Pixel(-20,20),//修改label相对于maker的位置
                            content:"<span style='color: red'>"+name+"</span>"/* 这里写的是html代码 */
                        })

 

目录
相关文章
|
存储 数据处理 开发工具
用python制作好的软件放手机里
【4月更文挑战第7天】
859 4
|
Web App开发 存储 移动开发
IRS应用发布之应用调试
Debug调试工具支持日志查询和前端页面调试:
IRS应用发布之应用调试
|
芯片 开发者 SoC
E906的中断系统|学习笔记
快速学习 E906的中断系统
965 0
E906的中断系统|学习笔记
|
8月前
|
人工智能 自然语言处理 算法
数字人|数字人企业新榜单与选择指南
数字人企业正以技术重塑人机交互,像衍科技、灵动视界、幻界智能三者分别以全栈技术、场景落地与AIGC生态引领行业。从虚拟主播到数字文博,数字人已渗透金融、医疗、文化等领域,推动虚拟与现实深度融合,开启一场技术与人性的深度对话。
|
11月前
|
缓存 NoSQL Java
Java Web 从入门到精通之苍穹外卖项目实战技巧
本项目为JavaWeb综合实战案例——苍穹外卖系统,涵盖Spring Boot 3、Spring Cloud Alibaba、Vue 3等主流技术栈,涉及用户认证、订单处理、Redis缓存、分布式事务、系统监控及Docker部署等核心功能,助你掌握企业级项目开发全流程。
1100 0
|
JavaScript 数据安全/隐私保护
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
Vue Amazing UI 是一个基于 Vue 3、TypeScript、Vite 等最新技术栈开发构建的现代化组件库,包含丰富的 UI 组件和常用工具函数,并且持续不断维护更新中。另外,组件库全量使用 TypeScript,支持自动按需引入和 Tree Shaking 等,能够显著提升开发效率,降低开发成本。
860 5
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
|
NoSQL 数据管理 关系型数据库
利用阿里云的尖端数据库解决方案增强游戏数据管理
利用阿里云的尖端数据库解决方案增强游戏数据管理
用555定时器接成的多谐振荡电路的介绍
用555定时器构建的多谐振荡电路 一、引言 多谐振荡电路是一种能够产生多个频率的振荡信号的电路结构。它在音乐合成器、电子琴等设备中有着广泛的应用。本文将介绍一种使用555定时器构建的多谐振荡电路。 二、555定时器简介 555定时器是一种经典的集成电路,由三个功能单元组成:比较器、RS触发器和放大器。它可以用作脉冲发生器、频率分频器、定时器等。在多谐振荡电路中,我们将利用555定时器的单稳态多谐振荡特性来实现多个频率的振荡。 三、电路设计 1. 电路原理 多谐振荡电路的基本原理是利用555定时器的单稳态多谐振荡特性。单稳态多谐振荡是指当555定时器处于单稳态时,输出信号的频率会随着电容和
1953 0
|
弹性计算 安全 API
HTTP 405 Method Not Allowed:解析与解决
本文详细解析了HTTP 405 &quot;Method Not Allowed&quot; 错误,包括其定义、常见原因、示例代码及解决方案。通过检查API文档、修改请求方法或更新服务器配置,可有效解决此错误,提升Web开发效率。
10312 2
|
安全 应用服务中间件 API
微服务架构下的API网关设计与实现
【6月更文挑战第16天】本文将深入探讨在微服务架构中,如何设计和实现一个高效的API网关。我们将从API网关的基本概念入手,然后详细解析其设计原则和实现方法,最后通过一个实例来具体展示API网关的实现过程。