• 百度地图点击地址后显示图标,保存到数据库之后,页面显示的是保存的坐标图标


    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+" &nbsp;纬度坐标:"+lat);
    $('#longitude').val(lng);
    $('#latitude').val(lat);
    });
    </script>
  • 相关阅读:
    不断进化中的云原生
    Helium (HNT)
    Linux上抓包工具tcpdump的使用
    docker开始收费之日,就是被抛弃之时,全面拥抱podman
    Mysql数据库的几大优势
    Google Doodle:龙年 新春快乐 龙年进步!
    夏季晨练不得早于6点 生活至上,美容至尚!
    洗脸方法帮你提升面部肤质 生活至上,美容至尚!
    午饭喝酸奶营养健康好身体 生活至上,美容至尚!
    夏天大作战,防晒油绝招 生活至上,美容至尚!
  • 原文地址:https://www.cnblogs.com/l-zl/p/6386965.html
Copyright © 2020-2023  润新知