layui.css地址,layui+高德获取经纬度(可点击更换位置)

本文介绍了一种使用AMap API实现地图上地理位置坐标获取的方法。通过输入地址名称,可以自动获取该地址对应的经纬度坐标,并将标记放置在地图上显示出来。此外,还实现了点击地图任意位置获取该点经纬度的功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

添加

#container{

height:100%;

width:100%;

text-align: center;

}

父类

顶级分类

@foreach($cate as $value)

{{$value->html.$value->title}}

@endforeach

标题

是否末级

无下级菜单时,请选择 ‘是’.

layui.config({

base: '{{asset('static')}}/layuiadmin/' //静态资源所在路径

}).extend({

index: 'lib/index' //主入口模块

}).use(['index', 'form'], function(){

var $ = layui.$

,form = layui.form

;

var map = new AMap.Map("container", {

resizeEnable: true

});

var geocoder,marker;

function geoCode() {

if(!geocoder){

geocoder = new AMap.Geocoder({

city: "0574" //仅浙江范围

});

}

var address = $('input[name=title]').val();

if(address == ''){

//默认给宁波这个位置

address = '宁波';

}

geocoder.getLocation(address, function(status, result) {

if (status === 'complete'&&result.geocodes.length) {

var lnglat = result.geocodes[0].location

$('input[name=longitude]').val(lnglat.lng);

$('input[name=latitude]').val(lnglat.lat);

if(!marker){

marker = new AMap.Marker();

map.add(marker);

}

marker.setPosition(lnglat);

map.setFitView(marker);

}else{

// layer.msg('请输入正确的地址');

}

});

};

var clickHandler = function(e) {

$('input[name=longitude]').val(e.lnglat.lng);

$('input[name=latitude]').val(e.lnglat.lat);

console.log(e.lnglat);

marker.setPosition(e.lnglat);

};

map.on('click', clickHandler);

$("input[name=title]").keydown(function(e){

if (e.keyCode === 13) {

geoCode();

return false;

}

return true;

});

$("input[name=title]").keyup(function(){

geoCode();

return false;

});

})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值