高德地图API的简单使用

港控/mmm° 2022-06-03 09:45 393阅读 0赞

<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">
    <style type="text/css"> body, html, #container { height: 100%; margin: 0px; font-size: 12px; } //这个是去掉地图上左下角的高德图标 .amap-logo,.amap-copyright{ display: none!important; } </style>

<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.4.0&key=你申请的key"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>

下面贴出部分代码

var map = new AMap.Map('container', {
                resizeEnable : true
            });
    
            var marker,circle,polygon;
    
            AMap.plugin([ 'AMap.ToolBar', 'AMap.Scale'], function() { 
                map.addControl(new AMap.ToolBar());
                map.addControl(new AMap.Scale());
                //map.addControl(new AMap.MapType({defaultType:0,showRoad:true}));
            });
    
            function setMapPosition(lng,lat){ 
                map.setZoomAndCenter(12,new AMap.LngLat(""+lng,""+lat));
            }
    
            function clearMarker(){ 
                marker.setMap(null);
            }
    
            function clearCircle(){ 
                circle.setMap(null);
            }
    
            function clearPolygon(){ 
                polygon.setMap(null);
            }
    
             function addMarker(lng,lat) { 
                   marker = new AMap.Marker({
                        icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png"
                    });
                    marker.setPosition(new AMap.LngLat(""+lng,""+lat));
                    marker.setMap(map);
                }
    
            //这是设置电子围栏（圆形的，参数是经度、纬度、半径）
             function addCircle(lng,lat,r) { 
                 r = parseFloat(r)*1000;
                 circle = new AMap.Circle({
                    center: new AMap.LngLat(""+lng,""+lat),// 圆心位置
                    radius: r, //半径,单位:米
                    strokeColor: "#F33", //线颜色
                    strokeOpacity: 1, //线透明度
                    strokeWeight: 1, //线粗细度
                    fillColor: "#ee2200", //填充颜色
                    fillOpacity: 0.15//填充透明度
                });
                map.setZoomAndCenter(12,new AMap.LngLat(""+lng,""+lat));
                circle.setMap(map);
             }
    
            //设置电子围栏（矩形的，参数是经度、纬度、宽度、高度），算法得到的结果是近似的，但相差不是很大
             function addPolygon(lng,lat,w,h){ 
                 var R = 6378.137 * 1;
                 lng = lng * 1;
                 lat = lat * 1;
                 w = w * 1;
                 h = h * 1;
                 var a = 0.25*w/R;
                 var b = 360/Math.PI;
                 var c = lat*Math.PI/180;
                 var m1 = lng + (b)*Math.asin(Math.sin(a)/Math.cos(c));
                 var m2 = lng - (b)*Math.asin(Math.sin(a)/Math.cos(c));
                 var n1 = lat + 90*h/(R*Math.PI);
                 var n2 = lat - 90*h/(R*Math.PI);
                 var polygonArr = new Array();
                 polygonArr.push(new AMap.LngLat(""+m1,""+n1));
                 polygonArr.push(new AMap.LngLat(""+m2,""+n1));
                 polygonArr.push(new AMap.LngLat(""+m2,""+n2));
                 polygonArr.push(new AMap.LngLat(""+m1,""+n2));
                 polygon = new AMap.Polygon({
                        path: polygonArr,//设置多边形边界路径
                        strokeColor: "#F33", //线颜色
                        strokeOpacity: 1, //线透明度
                        strokeWeight: 1,    //线宽
                        fillColor: "#ee2200", //填充色
                        fillOpacity: 0.15//填充透明度
                    });
                    map.setZoomAndCenter(12,new AMap.LngLat(""+lng,""+lat));
                    polygon.setMap(map);
             }

发表评论取消回复

表情：

评论列表（有 0 条评论，393人围观）

还没有评论，来说两句吧...

相关阅读

相关地图：nuxt3高德地图简单使用

一、官方网站 [https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare][https_lbs.amap.com_api_jsa

川长思鸟来/ 2024年03月30日 17:33/ 0 赞/ 44 阅读

相关高德地图API-定位以及地址标点使用（vue）

nuxt项目中使用的地点定位以下代码封装成了一个组件，传入数据即可生效效果图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5

Myth丶恋晨/ 2022年12月22日 09:06/ 0 赞/ 167 阅读

相关 java js 高德api_准备-入门-教程-地图 JS API | 高德地图API

本章介绍使用高德地图 JS API 开发地图应用之前的一些准备工作。注册账号并申请Key 1. 首先，注册开发者账号，成为高德开放平台开发者 2. 登陆之后，在进入「应

ゝ一世哀愁。/ 2022年11月12日 02:33/ 0 赞/ 251 阅读

相关 uniapp 使用高德地图

<template> <view> <view class="map" id="map"></view> </view> </t

分手后的思念是犯贱/ 2022年09月02日 12:50/ 0 赞/ 404 阅读

相关使用高德地图api实现web端查看地图轨迹

一实现效果：存入数据库的地址经纬度在地图上查看轨迹。 ![Center][] 可放大缩小查看详细地址： ![Center 1][]

末蓝、/ 2022年06月08日 10:18/ 0 赞/ 255 阅读

相关高德地图API的简单使用

<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">

港控/mmm°/ 2022年06月03日 09:45/ 0 赞/ 394 阅读

相关 Kibana使用高德地图

说明目前Kibana默认自带的地图全部是英文，更换高德地图对地图汉化修改配置 1. 编辑kibana配置文件kibana.yml，最后面添加 ti

秒速五厘米/ 2022年02月26日 07:24/ 0 赞/ 329 阅读

相关高德地图 Javascript API 入门（七）

高德地图 Javascript API 入门（七）热力图插件简单例子 // 显示地图 var map=new AMap.Map("cont

悠悠/ 2022年02月23日 12:13/ 0 赞/ 359 阅读

相关高德地图API使用笔记

最近公司项目需要用到高德地图绘制路径回放功能，在这里做下笔记记录一下。首先需要加载地图库文件 // key对应为你申请的key <script

港控/mmm°/ 2021年12月23日 12:01/ 0 赞/ 487 阅读

相关高德地图基本使用

1、引入 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15

比眉伴天荒/ 2021年07月24日 22:01/ 0 赞/ 607 阅读