高德地图jsAPI，定位和选择位置

一、前端页面


#container {width: 700px;height: 311px;}<div id="container">
这里是地图控件的容器
</div>

二、js

首先引入api

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.12&key=申请的开发者密匙&plugin=AMap.Geocoder"></script>

接着在script标签中就可以调用了：

//地图初始位置，可以在页面初始化时传入经纬度，也可以ajax获取，不过由于地图初始化较慢，需要考虑同步
var lon = $('#longitude').val()
var lat = $('#latitude').val();
var map;
if (lon > 0) {//初始化到已有地点map = new AMap.Map('container', {zoom: 20,resizeEnable: true,center: [lon, lat],viewMode: '3D'});
} else {//初始化到默认地点map = new AMap.Map('container', {zoom: 12,resizeEnable: true,viewMode: '3D'});
}
//此插件用来显示当前位置，可在引入API时一同引入
map.plugin('AMap.Geolocation', function () {var geolocation = new AMap.Geolocation({enableHighAccuracy: true,timeout: 10000,buttonOffset: new AMap.Pixel(10, 20),zoomToAccuracy: true,buttonPosition: 'RB'});map.center = geolocation;map.addControl(geolocation);//地图控件右下角显示当前位置
});var geocoder, marker;
if (!marker) {marker = new AMap.Marker();map.add(marker);
}var lnglat;
//地图点击时，获取点击地经纬度
map.on('click', function (e) {lnglat = e.lnglat;regeoCode();
})
function regeoCode() {if (!geocoder) {geocoder = new AMap.Geocoder();}if (!marker) {marker = new AMap.Marker();map.add(marker);}marker.setPosition(lnglat);//设置标记的位置geocoder.getAddress(lnglat, function (status, result) {if (status === 'complete' && result.regeocode) {var address = result.regeocode.formattedAddress;//$('#address').val(address);//点击地名称//$('#longitude').val(lnglat.lng);//经纬度//$('#latitude').val(lnglat.lat);}});marker.setMap(map);//在地图上显示一个标记
}
// marker.setPosition([lon, lat]);

三、效果

点击右下角时会定位到当前位置（网络位置），点击地图的其他地方，蓝色标记会移动并获取当地名称和经纬度。

高德地图jsAPI，定位和选择位置相关推荐

android高德地图默认当前位置,【报Bug】1.9.2 android 高德地图无法定位到当前位置...
详细问题描述 (DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你的环境和重现方式,否则DCloud很难排查解决你的问题) [内容] 1.9.2版本 a ...
基于高德地图JsAPI进行浏览器精确定位，实现手机端考勤打卡功能
前言: 由于项目需求需要在项目中实现手机端(基于网页)考勤打卡功能,最初考虑使用H5自身定位功能,但尝试过后,效果很不稳定.然后尝试使用百度地图JsAPI,百度家的稳定倒是很稳定,没想到的是定位位置和 ...
Android 集成高德地图——当前定位，添加图标，画路线，设置显示中心位置，比例，地图刷新位置监听，判断GPS开启，去打开GPS
/*** 判断定位服务是否开启** @param* @return true 表示开启*/ public static boolean isLocationEnabled(Context contex ...
java js 高德api_高德地图JSApi
火星坐标获取demo #iMap{height:500px;width:600px;float:left;} .info{float:left;margin:0 0 0 10px;} label{wi ...
高德地图JSAPI的使用注意项
前言最近有个项目用到了高德地图,基于高德引擎进行相关需求的开发,开发过程中碰到了一些问题,简单的记录一下. 选择高德地图那肯定是因为买了高德地图的什么东西哈哈哈,就是可以基于高德引擎进行开发并且部 ...
高德地图H5 定位失败报错 geolocation time out. Get ipLocation failed解决方案
高德地图H5 定位失败报错 geolocation time out. Get ipLocation failed的解决方法. 前言:此坑踩得我挺难受的,搞了三天需求:进入页面,获取用户具体经纬度并 ...
Android Studio之高德地图实现定位和3D地图显示
在应用开发中,地图开发是经常需要使用的"组件",国内比较出名的是就是百度地图和高德地图. 此博客讲的是高德地图实现定位和3D地图显示,并标注相应位置,话不多说,先看看效果,在上代码 ...
android------之高德地图实现定位和3D地图显示
2019独角兽企业重金招聘Python工程师标准>>> 在应用开发中,地图开发是经常需要使用的"组件",国内比较出名的是就是百度地图和高德地图. 此博客讲的是高德 ...
vue调用高德地图实现定位
vue调用高德地图实现定位第一步创建高德地图key 第二步:下载vue-amap npm install vue-amap --save 第三步:在项目main.js引入vue-amap impor ...
Android 高德地图自定义线路规划选择方案之后按照方案进行导航
Android 高德地图自定义线路规划选择方案之后按照方案进行导航因为我这边导航需求的问题,导致我这边不能使用高德地图官方的线路规划和导航.所以我这边线路规划和导航界面都是根据高德地图那边给的api ...

高德地图jsAPI，定位和选择位置

一、前端页面

二、js

三、效果

高德地图jsAPI，定位和选择位置相关推荐

最新文章

热门文章