HTML:
地图的大小显示
<div class="form-group field-company-state">
<label class="control-label col-sm-2" for="company-state"></label>
<div style="width:400px;height:300px;border:0px solid gray" id="container"></div>
</div>
点击地图时显示地图上的经纬度
<div class="form-group field-company-state">
<label class="control-label col-sm-2" for="company-state"></label>
<div id="map_longitude_latitude"></div>
</div>
两个隐藏框中显示经度和纬度
<input type="hidden" id="longitude" class="form-control input-sm" name="Concentrator[longitude]" value="<?=$model->longitude?>">
<input type="hidden" id="latitude" class="form-control input-sm" name="Concentrator[latitude]" value="<?=$model->latitude?>">
JavaScript:
<script type="text/javascript" src="http://api.map.baidu.com/api?ak=PZDFCSTlNNKdhxTNnsWt31mXQmkGnLv1"></script>
<script>
var map = new BMap.Map("container");
//百度地图
var map = new BMap.Map("container");
//添加鼠标滚动缩放
map.enableScrollWheelZoom();
//添加缩放平移控件
map.addControl(new BMap.NavigationControl());
//添加比例尺控件
map.addControl(new BMap.ScaleControl());
var oldlng = '119.163431';
var oldlat = '36.71894';
var lat = "<?=$model->latitude?>";
var lng = "<?=$model->longitude?>";
if(lat !=0 && lng != 0){//如果坐标存在
map.clearOverlays();删除覆盖物
var point = new BMap.Point(lng,lat);//创建地图的中心点
map.centerAndZoom(point,15);//显示地图的比例
var marker = new BMap.Marker(new BMap.Point(lng, lat));// 创建点
map.addOverlay(marker);//添加点
} else {
var point = new BMap.Point(oldlng,oldlat);
map.centerAndZoom(point,15);
var marker = new BMap.Marker(new BMap.Point(oldlng, oldlat)); // 创建点
map.addOverlay(marker);
}
map.addEventListener("click", function(e){
map.clearOverlays();
var marker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat));
map.addOverlay(marker);
var lng = e.point.lng;
var lat = e.point.lat;
$('#map_longitude_latitude').html("经度坐标:"+lng+" 纬度坐标:"+lat);
$('#longitude').val(lng);
$('#latitude').val(lat);
});
</script>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧