前端页面如何获取高德地图

首先需要获取高德地图 api，下面的网址可以获取，具体获取教程百度可得

https://console.amap.com/dev/index

获取地图代码操作

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>//引入高德地图的js和key，怎么拿到key自己百度<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=放key位置"></script><style type="text/css">#app{width: 600px;height: 400px;}</style>
</head><body>
//建立一个容器显示地图<div id="app"></div>
</div><script type="text/javascript">window.onload = function () {//地图配置AMap.plugin('AMap.Geolocation', function () {var geolocation = new AMap.Geolocation({// 是否使用高精度定位，默认：trueenableHighAccuracy: true, // 设置定位超时时间，默认：无穷大timeout: 10000, // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)buttonOffset: new AMap.Pixel(10, 20), // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：falsezoomToAccuracy: true, // 定位按钮的排放位置, RB表示右下buttonPosition: 'RB'})//获取当前定位geolocation.getCurrentPosition()//监听定位事件，获取具体位置信息和经纬度AMap.event.addListener(geolocation, 'complete', e => {//定位完成触发console.log(e) console.log(e.position.lat)console.log(e.position.lng)var mapSet = []mapSet[1] = e.position.latmapSet[0] = e.position.lngconsole.log(mapSet)//将地图放置容器内var map = new AMap.Map('app', {resizeEnable: true,center: mapSet, // 地图标记titlezoom: 17 // 地图视图缩放级别,数值越大越精确})const marker = new AMap.Marker({position: map.getCenter()})marker.setMap(map)//如果需要添加标记点，可编辑以下代码//创建一个标记点//var marker1 = new AMap.Marker({// 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]//position: new AMap.LngLat(116.44927, 39.9584), //title: "位置标题"//});// 将创建的点标记添加到已有的地图实例：//map.add(marker1);})AMap.event.addListener(geolocation, 'error', e => {console.log(e) // 定位失败触发})})}
</script>
</body>
</html>

前端页面如何获取高德地图相关推荐

Vue3 Echarts散点图+高德地图+卫星地图（一）——获取高德地图API
前言:在开发的过程中,对于Vue3的情况下,对于Echarts地图的文章操作很少,并且官方不通俗易懂,所以在此进行记录探索过程.还是一如既往贴近直接C/V操作,如果对于Echarts基本配置不会的同学 ...
python获取高德地图POI——关键字搜索
本文主要内容是利用python获取高德地图上的感兴趣点(POIs). 高德开放平台:https://lbs.amap.com/ 下载POI分类编码和城市编码表搜索POI相关文档:https://lb ...
python高德查询县_Python获取高德地图省市区县列表
项目中需要用省市区来进行检索,原想高德地图肯定会有API来获得这些数据,结果没有找到,有一个接口好像可以用,但是会附带大量的边界坐标点. 所以就不如自己把高德的省市区列表扒下来,自己写接口来完成这个功 ...
python高德查询县_【python】获取高德地图省市区县列表
项目中需要用省市区来进行检索,原想高德地图肯定会有API来获得这些数据,结果没有找到,有一个接口好像可以用,但是会附带大量的边界坐标点. 所以就不如自己把高德的省市区列表扒下来,自己写接口来完成这个功 ...
iOS获取高德地图实现持续定位功能
首先,根据高德地图开发平台在Xcode里面配置相应的环境自动部署用cocoapods,请按照http://lbs.amap.com/api/ios-location-sdk/guide/create ...
前端数据可视化之高德地图
高德地图&数据可视化仙人指路,才高八斗区域掩模和遮罩一起使用仙人指路,才高八斗 Gaud map在手,做啥都不愁区域掩模和遮罩一起使用先来搭建盒子模型和引入高德地图然后在body里 ...
H5页面中调起高德地图app，如果未安装应用，则提示用户安装
一.需求: 在之前做的项目中,有个需求是,点击"去这里"的按钮,会调起高德地图app,并导航至目的地,如果用户未安装高德地图app,则提示用户需先下载二.代码部分 1.获取目标地 ...
html5唤起高德,h5页面唤醒百度高德地图
唤醒APP链接 //高德地图 window.location.href="androidamap://viewMap?sourceApplication=appname&poinam ...
如何使用Python获取高德地图中的地铁线路数据(geojson版本)
目录数据来源文件管理引用的库获取文件夹名称读取文件提取转化为线文件提取转化为点文件主程序最终成果数据来源通过在高德地图搜索框直接搜索地铁线路,地图上会高亮显示地铁线路.通过尝试发 ...
从前端页面到获取数据库的数据，需要哪些步骤？一个项目的起步。初学者可以来瞧瞧哇~
总结了一下自己的学习成果(之一). 从前端页面(html或者jsp)里的form表单拿到数据(通过action或者ajax获取),传给servlet,再在数据库(我用的mysql)中取出数据,在ser ...

前端页面如何获取高德地图

前端页面如何获取高德地图相关推荐

最新文章

热门文章