700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 高德地图点击标记并获取标记点坐标和地址信息

高德地图点击标记并获取标记点坐标和地址信息

时间:2020-10-11 12:49:25

相关推荐

高德地图点击标记并获取标记点坐标和地址信息

html

<div class="form-group"><label class="col-sm-2 control-label">门店名称:</label><div class="col-sm-9"><input type="text" id="md_name" value="" name="md_name" class="form-control" placeholder="请输入门店名称称"></div></div><div class="form-group"><label class="col-sm-2 control-label">门店坐标:</label><div class="col-sm-9"><input type="text" id="coordinate" value="" name="coordinate" class="form-control" placeholder="门店坐标(点击地图获取)"><input type="hidden" name="longitude" id="longitude" value=""><input type="hidden" name="latitude" id="latitude" value=""></div></div><div class="form-group"><label class="col-sm-2 control-label">门店地址:</label><div class="col-sm-9"><input type="text" id="md_addr" value="" name="md_addr" class="form-control" placeholder="门店地址(点击地图获取)"></div></div><div class="form-group"><label class="col-sm-2 control-label">高德地图:</label><div class="col-sm-9"><div id="container" tabindex="0" style="width:530px;height:350px"></div></div></div>

js(需要引入jquery)

<script src="/maps?v=1.4.2&key=高德申请的key&plugin=AMap.Geocoder"></script><script type="text/javascript">var marker, map = new AMap.Map('container',{resizeEnable: true,center: [116.650687,35.012617],// mapStyle: "amap://styles/blue",mapStyle: "amap://styles/normal",zoom:10});var aa = null;//为地图注册click事件获取鼠标点击出的经纬度坐标map.on('click', function(e) {var longitude = e.lnglat.getLng();var latitude = e.lnglat.getLat();var coordinate = e.lnglat.getLng() + ',' + e.lnglat.getLat();$("#longitude").val(longitude);$("#latitude").val(latitude);$("#coordinate").val(coordinate);// alert($("#coordinate").val());marker = new AMap.Marker({// icon: "/jsapi_demos/static/demo-center/icons/poi-marker-default.png",position: [longitude,latitude],// offset: new AMap.Pixel(-13, -30),// title: coordinate[i].name,// map: map});if(aa){map.remove(aa);}aa = markermarker.setMap(map);regeoCode(coordinate);});var geocoder = new AMap.Geocoder({// city: "010", //城市设为北京,默认:“全国”// radius: 1000 //范围,默认:500});function regeoCode(lnglat) {geocoder.getAddress(lnglat, function(status, result) {if (status === 'complete'&&result.regeocode) {var address = result.regeocode.formattedAddress;$("#md_addr").val(address);}else{log.error('根据经纬度查询地址失败')}});}</script>

效果图

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。