AMap(创建基础地图)

news/2024/11/25 6:20:29/

实现代码

<!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"><link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /><title>AMap创建地图</title><style>html,body,#container {margin: 0;padding: 0;width: 100%;height: 100%;}</style>
</head>
<body>
<div id="container"></div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
<script>var map = new AMap.Map('container', {/* 涉及到的布尔类型的属性animateEnable:地图平移过程中是否使用动画(默认为true)resizeEnable:是否监控地图容器尺寸变化(默认为false)isHotspot:是否开启地图热点和标注的hover效果(PC端默认为true,移动端默认为false) rotateEnable:地图是否可旋转(3D视图默认为true,2D视图默认为false)dragEnable:地图是否可通过鼠标拖拽平移(默认为true)zoomEnable:地图是否可缩放(默认为true)doubleClickZoom:地图是否可通过双击鼠标放大地图(默认为true)keyboardEnable:地图是否可通过键盘控制(默认为true)jogEnable:地图是否使用缓动效果(默认为true)scrollWheel:地图是否可通过鼠标滚轮缩放浏览(默认为true)touchZoom:地图在移动终端上是否可通过多点触控缩放浏览地图(默认为true)showBuildingBlock: 地图显示3D楼块效果,移动端也可使用(默认为true) 【注】实测结果,语言类型为中文时才生效pitchEnable: 地图能否调节俯仰角度(3D视图默认为true,2D视图下无效)buildingAnimation: 楼块出现和消失的时候是否显示动画过程(3D视图有效,PC端默认为true,手机端默认为false) */// 地图默认的缩放级别,zooms属性可以用数组来规定缩放范围,PC端默认为[3,18],取值范围[3-18];移动端默认为[3,19],取值范围[3-19]zoom: 13,// 中心点经纬度坐标(默认为所在市区)center: [121.48612, 31.24166],// 使用3D视图(默认为2D)viewMode:'3D',// 地图俯仰角度(默认为0),取值范围为[0,83],2D地图下无效pitch:30,// 地图语言类型(默认为中文简体),可取值:'zh_cn'(中文简体),'en'(英文),zh_en中英文双语lang: 'zh_cn'          });
</script>

http://www.ppmy.cn/news/427042.html

相关文章

vue-amap安装和使用

之前分享了异步加载高德地图api的用法&#xff0c;现在记录一下vue-amap的用法。 vue-amap 是饿了么开源的一套基于 Vue 2.0 和高德地图的地图组件。 数据状态与地图状态单向绑定&#xff0c;开发者无需关心地图的具体操作。 官方文档&#xff1a;组件 | vue-amap 步骤如下&…

高德地图No implementation found for long com.autonavi.amap.mapcore.MapCore

此篇博客最后更新时间写自2016.5.18。当下高德地图jar版本为3.3.1。 使用高德地图碰到此问题&#xff0c;纠结许久&#xff08;接近4个多小时&#xff09;。 记录在此&#xff0c;希望遇到相同问题的读者可以有所借鉴。 错误截图&#xff1a; 导致问题的原因主要有两种&#x…

Android高德地图开发--读取解析KML文件并显示在地图上

先来看效果图 1 本文实现的功能如下&#xff1a; 1.1 浏览本地文件&#xff0c;找到KML文件&#xff1b; 1.2 读取解析KML文件&#xff1b; 1.3 将KML文件中的位置信息显示在高德地图上&#xff1b; 总体框架和思路&#xff1a;打开文件对话框浏览*.kml文件&#xff0c;…

高德地图Amap离线地图的使用

一、问题现象 高德地图离线地图的官方使用教程点这里传送门 我们把在正常有网的手机上通过离线地图下载的城市数据拷贝出来备用&#xff0c;如下图 把上面两个文件夹放到一台插有物联网卡的终端机器上&#xff0c;存放目录为SD卡根目录的amap文件夹下&#xff0c;接着打开终端…

amap和amapcrap使用

介绍 amap – 渗透测试人员的下一代扫描工具 amapcrap - 将随机数据发送到UDP&#xff0c;TCP或SSL端口以获取非法响应: amap是第首款针对渗透测试人员的下一代扫描工具&#xff0c;是用于标识目标端口上的应用程序协议的工具。 第一个“下一代”主动扫描器 最早支持UDP、I…

高德地图 AMap.PlaceSearch

AMap.PlaceSearch 地点搜索服务&#xff0c;提供某一特定地区的位置查询服务。PlaceSearch构造函数的参数为可选&#xff0c;表达为参数对象PlaceSearchOptions。PlaceSearchOptions允许设置搜索城市、搜索数据类别、搜索结果详略、搜索结果排序规则等。用户可以通过自定义回调…

vue-amap 地图定位打卡

1、注册并登录高德开放平台 1、首先&#xff0c;注册开发者账号&#xff0c;成为高德开放平台开发者 2、登陆之后&#xff0c;在进入「应用管理」 页面「创建新应用」 3、为应用添加 Key 4、添加成功后&#xff0c;可获取到key值和安全密钥jscode&#xff08;自2021年12月02日升…

记一次高德地图引入 AMap is not defined 血坑

步骤&#xff1a; 1 在pubic文件夹下的index.html中引入高德地图的js文件 <script type"text/javascript" src"https://webapi.amap.com/maps?v2.0&key自己申请的key&pluginAMap.CitySearch"></script> 2 在methods中写一个获取位置…