zoukankan      html  css  js  c++  java
  • 百度地图点击地址后显示图标,保存到数据库之后,页面显示的是保存的坐标图标

    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>
  • 相关阅读:
    jstack 命令
    jmap 命令
    jinfo 命令
    jstat 命令
    jps 命令
    java虚拟机内存区域详解
    chgrp 命令
    chown 命令
    java自定义注解
    Mysql中key 、primary key 、unique key 与index区别
  • 原文地址:https://www.cnblogs.com/l-zl/p/6386965.html
Copyright © 2011-2022 走看看