高德地图拾取经纬度 + 搜索 + 标记

效果图：（不说样式了，效果出来就行）

代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=0250860ccb5953fa5d655e8acf40ebb7&plugin=AMap.Geocoder"></script><style>#iMap {height: 450px;width: 800px;position: absolute;margin-left: 100px;margin-top: 15px;margin-bottom: 25px;z-index: 999999;}.info {float: left;margin: 0 0 0 10px;}label {width: 80px;float: left;}.detail {padding: 10px;border: 1px solid #aaccaa;}.layui-btn-te {margin-top: 500px;}input{width: 450px;line-height: 25px;}</style></head><body><div class="layui-form-item"><label class="layui-form-label">企业名称</label><div class="layui-input-block"><input type="text" name="title" value="" autocomplete="off" placeholder="请输入企业名称" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">电话</label><div class="layui-input-block"><input type="number" name="mobile" value="" autocomplete="off" placeholder="请输入企业名称" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">详细地址</label><div class="layui-input-block"><input type="text" id="particular_site" name="particular_site" value="" readonly autocomplete="off" placeholder="点击地图自动选定"class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">经纬度</label><div class="layui-input-block"><input type="text" name="longitude" id="longitude" value="" readonly autocomplete="off" placeholder="点击地图自动选定"class="layui-input"></div></div><input type="hidden" name="lng" id="lng" value=""><input type="hidden" name="lat" id="lat" value=""><div class="layui-form-item"><label class="layui-form-label">搜索地址</label><div class="layui-input-block"><input type="text" id="addressBox" autocomplete="off" placeholder="可搜索地址" class="layui-input"><button type="button" onclick="geocoder();" class="layui-btn layui-btn-primary layui-btn-position">搜索</button></div></div><div id="iMap"></div></body>
</html>
<script language="javascript">var addressBox = document.getElementById('addressBox');var longitude = document.getElementById('longitude').value;var lng = document.getElementById('lng').value;var lat = document.getElementById('lat').value;var mapObj;var lnglatXY;//初始化地图function mapInit(x, y) {mapObj = new AMap.Map("iMap", {zoom: 16,center: new AMap.LngLat(x, y)});AMap.event.addListener(mapObj, 'click', getLnglat); //点击事件punctuation(x, y);}//标点展示function punctuation(x, y) {var marker = new AMap.Marker({map: mapObj,position: [x, y]});}if (longitude != "") {mapInit(lng, lat);} else {mapInit(113.9268, 35.303004);}function geocoder() {mapObj.clearMap();var myGeo = new AMap.Geocoder();//地理编码,返回地理编码结果myGeo.getLocation(addressBox.value, function(status, result) {if (status === 'complete' && result.info === 'OK') {//地址解析成功// var address = data.regeocode.formattedAddress;var x = result.geocodes[0].location.lng;var y = result.geocodes[0].location.lat;// document.getElementById("particular_site").value = address;document.getElementById("longitude").value = x + "," + y; //经纬度document.getElementById("lng").value = x; //经度document.getElementById("lat").value = y; //纬度var XY = [x, y];mapInit(x, y);regeocoder(XY);punctuation(x, y); //更新标记} else {//地址解析失败alert("地址不存在")}});}//鼠标点击，获取经纬度坐标function getLnglat(e) {mapObj.clearMap();console.log(e);var x = e.lnglat.getLng();var y = e.lnglat.getLat();document.getElementById("longitude").value = x + "," + y; //经纬度document.getElementById("lng").value = x; //经度document.getElementById("lat").value = y; //纬度var XY = [x, y];regeocoder(XY);punctuation(x, y); //更新标记lnglatXY = new AMap.LngLat(x, y);}//地址详细描述function regeocoder(loc) { //逆地理编码console.log(loc);var geocoder = new AMap.Geocoder({radius: 1000,extensions: "all"});geocoder.getAddress(loc, function(status, result) {if (status === 'complete' && result.info === 'OK') {geocoder_CallBack(result);}});}function geocoder_CallBack(data) {var address = data.regeocode.formattedAddress; //返回地址描述document.getElementById("particular_site").value = address;}
</script>
<!-- js结束 -->

高德地图拾取经纬度 + 搜索 + 标记相关推荐

vue中引用高德地图根据经纬度计算两地距离
vue中引用高德地图根据经纬度计算两地距离一.示例图: npm安装 npm install vue-amap --save 在min.js文件中引入vue-amap import VueAMap f ...
python获取高德地图POI——关键字搜索
本文主要内容是利用python获取高德地图上的感兴趣点(POIs). 高德开放平台:https://lbs.amap.com/ 下载POI分类编码和城市编码表搜索POI相关文档:https://lb ...
vue项目引入高德地图(定位、搜索、经纬度解析地址)
1.npm 安装 npm install vue-amap --save 2.main.js文件引入vue-amap import VueAMap from 'vue-amap' Vue.use(Vu ...
高德地图关键字提示搜索获取经纬度
效果图: 具体代码: <!doctype html> <html> <head><meta charset="utf-8">< ...
高德地图引用，搜索定位
以下为最近项目中开发的高得地图定位功能,附上效果图与源代码.mapUtil.jsvar map,addMarker;var geocoder;var placeSearch;var infoWindo ...
Cesium调用高德地图服务实现搜索地点定位详解
一.需求分析需要做一个类似于高德地图的搜索可以参考高德地图,用户输入地点,下拉列表自动弹出少量的相应地点,点击内容地点可以直接选择定位并且添加Cesium的广告牌(图标)和标注,点击标注可以弹出详细 ...
高德地图根据名称搜索坐标，坐标点呈现列表展示
效果展示话不多说,直接上代码 <!doctype html> <html> <head><meta charset="utf-8"> ...
高德地图-根据经纬度获取地址（逆地理编码）
1.需要资源: 高德地图搜索SDK以及相关SDk下载地址 2.根据经纬度得到具体地址: 1.这里需要用到地图搜索SDK: 2.通过逆地理编码来实现. 3.示例代码: @Overrideprotecte ...
vue 使用高德地图给海量点标记，并点击标记弹出信息窗口，信息窗口绑定点击事件
目录一.需求二.引入高德地图 2.1.将高德地图引入到项目中 2.2.查看官网快速上手,熟悉高德地图的主要API 2.3.海量点标注要用到的API文档 2.4.全部代码其他: 一.需求因为不知 ...
高德地图的使用点标记、折线标记
高德地图是非常方便的插件可以在地图上添加点标记标记内容首先要在页面引入高德地图 <script src="https://webapi.amap.com/maps?v=1.4.13& ...

高德地图拾取经纬度 + 搜索 + 标记

高德地图拾取经纬度 + 搜索 + 标记相关推荐

最新文章

热门文章