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>
  • 相关阅读:
    leetcode 673. 最长递增子序列的个数 java
    leetcode 148. 排序链表 java
    leetcode 98. 验证二叉搜索树 java
    leetcode 29. 两数相除 java
    leetcode 234. 回文链表 java
    Valid Palindrome LeetCode Java
    Single Number II LeetCode Java
    Single Number LeetCode java
    Search in Rotated Sorted Array II LeetCode Java
    Search in Rotated Sorted Array leetcode java
  • 原文地址:https://www.cnblogs.com/l-zl/p/6386965.html
Copyright © 2011-2022 走看看