HTML:
地图的大小显示
<div class="form-group field-company-state">
<label class="control-label col-sm-2" for="company-state"></label>
<div style="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>