高德地图web 二次开发

初始化

    map = new AMap.Map("mapContainer", {resizeEnable: true,zoom: 10,//city:$('#input_address').val(),});

点击地图标记

        //为地图注册click事件获取鼠标点击出的经纬度坐标 清除其余的标记 添加新标记map.on('click', function(e) {console.log(e)//清除所有覆盖物map.clearMap();let lnglatXY = [e.lnglat.getLng(),e.lnglat.getLat()]; //已知点坐标//根据坐标查询regeocoder(lnglatXY);});

逆地理编码

    //逆地理编码function regeocoder(lnglatXY) {AMap.plugin('AMap.Geocoder',function(){var geocoder = new AMap.Geocoder({radius: 1000,extensions: "all"});var addressNew;geocoder.getAddress(lnglatXY, function(status, result) {if (status === 'complete' && result.info === 'OK') {addressNew = result.regeocode.formattedAddress; //返回地址描述console.log(addressNew)//document.getElementById("address").value = address;}});let marker = new AMap.Marker({  //加点map: map,position: lnglatXY,title:addressNew,//draggable: true,//拖拽});map.setFitView();})}

定位

        //定位AMap.plugin(['AMap.Geolocation'], () => {let geolocation = new AMap.Geolocation({enableHighAccuracy: true, //是否使用高精度定位，默认:truetimeout: 10000, //超过10秒后停止定位，默认：5sbuttonPosition: "RB", //定位按钮的停靠位置buttonOffset: new AMap.Pixel(0, 0), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点showMarker: true, //定位成功后在定位到的位置显示点标记，默认：trueshowCircle: true, //定位成功后用圆圈表示定位精度范围，默认：truepanToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：trueextensions: "all",});geolocation.getCurrentPosition((status, result) => {//定位成功if (status == "complete") {console.log("定位成功", result);//获取定位坐标loaction = [result.position.lng, result.position.lat];//创建地图createMap();map.addControl(geolocation);} else {//定位失败loaction = [0, 0];createMap();map.addControl(geolocation);console.log("定位失败,原因：" + result.message);}if (typeof callback === "function") {callback();}});});

POI 搜索

 AMap.plugin(['AMap.PlaceSearch','AMap.Geolocation'], () => {var placeSearch = new AMap.PlaceSearch({//city:'全国',zoom: 16,map:map})placeSearch.search($('#input_address').val(), function (status, result) {// 查询成功时，result即对应匹配的POI信息console.log(result)//注意：搜索方法自带marker 不清除你自己的marker会被覆盖//清除所有覆盖物   map.clearMap();var pois = result.poiList.pois;var marker = [];for (var i = 0; i < pois.length; i++) {//marker = [];marker[i] = new AMap.Marker({map: map,position: pois[i].location,   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]title: pois[i].name,bubble:true,//是否将覆盖物的鼠标或touch等事件冒泡到地图上clickable:true,//设置是否支持点击事件});//不再添加点击事件 直接冒泡到地图上 使用地图上的点击事件
/*                    if(marker[i]){//监听marker的点击事件marker[i].on('click', clickMarker( pois[i]));}*/// 将创建的点标记添加到已有的地图实例：// map.add(marker[i]);}map.setFitView();});});

高德地图web 二次开发相关推荐

QT+高德地图Web服务API开发—静态地图开发Demo。QT组件提升、QT鼠标事件处理、Qt图片显示与移动、QT网络操作
说明在本次项目中,我们使用QT开发框架,高德地图Web服务地图API,完成一个项目Demo,进行一次对QT.对编程的学习. 本系类文章所包含内容包括: 1.QT组件提升 2.QT鼠标事件处理 3.Q ...
【高德地图WEB开发】入门篇（地图/搜索/经纬度/缩放层级）
前言本篇文章是高德地图web开发入门篇,实现地图搜索等基本功能,后续会继续更新地图标记点.驾车.骑行.货车等单地点\多地点导航.公交路线.兴趣周边点.及其他地图功能开发文章,所有功能均使用js实现, ...
前端系列——vue2+高德地图web端开发（poi搜索两种方式）
前端系列--vue2+高德地图web端开发(poi搜索) 前言基础什么是poi搜索 1. 输入提示结合poi搜索官方代码步骤 1.进行plugins插件注册 2.data中编写placeSea ...
前端系列——vue2+高德地图web端开发（使用和引入）
vue2+高德地图web端开发(使用和引入) 前言基础准备工作高德地图的个人开发者注册高德api网址 1.点击进行注册 2.注册完之后进入控制台 3.创建新应用 4.添加高德 2.0 新增 ...
前端系列——vue2+高德地图web端开发（行政区边界绘制）
vue2+高德地图web端开发(行政区边界绘制) 前言原理基础实现步骤 1.eslint设置AMap为全局变量放置报错 2.Search.vue传输给MapContainer.vue数据然后进行 ...
Android学习之高德地图的通用功能开发步骤（二）
周一又来了,我就接着上次的开发步骤(一)来吧,继续把高德地图的相关简单功能分享一下上次写到了第六步,接着写第七步吧. 第七步:定位 + 地图选点 + 路径规划 + 实时导航以下是我的这个功能Nav ...
微信小程序使用高德地图Web服务爬取企业数据
高德地图Api官网:高德开放平台 | 高德地图API 一.高德地图使用说明 "POI2.0" 地点搜索服务2.0是一类Web API接口服务:服务提供多种场景的地点搜索能力,包括关 ...
高德 php,高德地图WEB版的使用
最近学习了一下高德地图web版的使用,总结了一下高德基础控件的应用,高德地图是开源可编辑的,方法不是很难,有兴趣的朋友可以试一试自己编辑一下. 之前想自己做一个旅游导航的项目,在网上一搜发现了高德地图 ...
corodva中使用高德地图web js api
高德地图web js api有一个其他的地图插件都没有的功能,就是地图俯角可以达到80°,而其他的地图api(百度45°,mapbox60°),包括高德地图的Android sdk都无法达到这样的大角 ...

高德地图web 二次开发

初始化

点击地图标记

逆地理编码

定位

POI 搜索

高德地图web 二次开发相关推荐

最新文章

热门文章

高德地图web 二次开发

初始化

点击 地图标记

逆地理编码

定位

POI 搜索

高德地图web 二次开发相关推荐

最新文章

热门文章

点击地图标记