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>
  • 相关阅读:
    『Argparse』命令行解析
    『MXNet』专题汇总
    用.NET开发通用Windows App
    ASP.NET 5探险(6):升级ASP.NET 5到beta6
    使用ASP.NET MVC、Rabbit WeixinSDK和Azure快速开发部署微信后台
    Visual Studio 2015将在7月20号RTM
    VS2015上又一必备免费插件:Refactoring Essentials
    ASP.NET 5探险(5):利用AzureAD实现单点登录
    Visual Studio Code升级到0.5,提供对ES6的更好支持
    ASP.NET 5探险(4):如何把ASP.NET 5从beta4升级到beta5
  • 原文地址:https://www.cnblogs.com/l-zl/p/6386965.html
Copyright © 2011-2022 走看看