微擎后台調用地圖

微擎后台開發的時候經常需要調用地圖。

騰訊地圖：

<div class="form-group">
 <label class="col-xs-12 col-sm-3 col-md-2 control-label">位置</label>
                            <div class="col-sm-9 col-xs-12">
            <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=你自己的KEY"></script>
 
             <script type="text/javascript">
                function showCoordinate(elm) {
                    require(["util"], function(util){
                        var val = {};
                        val.lng = parseFloat($(elm).parent().prev().prev().find(":text").val());
                        val.lat = parseFloat($(elm).parent().prev().find(":text").val());
                        util.qqmap(val, function(r){
                            $(elm).parent().prev().prev().find(":text").val(r.lng);
                            $(elm).parent().prev().find(":text").val(r.lat);
                        });
 
                    });
                }
 
            </script>
        <div class="row row-fix">
            <div class="col-xs-4 col-sm-4">
                <input type="text" name="map[lng]" value="108.896566" placeholder="地理經度"  class="form-control" />
            </div>
            <div class="col-xs-4 col-sm-4">
                <input type="text" name="map[lat]" value="34.227563" placeholder="地理緯度"  class="form-control" />
            </div>
            <div class="col-xs-4 col-sm-4">
                <button onclick="showCoordinate(this);" class="btn btn-default" type="button">選擇坐標</button>
            </div>
        </div>
    </div>
         </div>

百度地圖：

 <div class="form-group">
 <label class="col-xs-12 col-sm-3 col-md-2 control-label">位置</label>
                            <div class="col-sm-9 col-xs-12">
                                <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你自己的KEY&s=1"></script><script type="text/javascript">
                function showCoordinate(elm) {
                    require(["util"], function(util){
                        var val = {};
                        val.lng = parseFloat($(elm).parent().prev().prev().find(":text").val());
                        val.lat = parseFloat($(elm).parent().prev().find(":text").val());
                        util.map(val, function(r){
                            $(elm).parent().prev().prev().find(":text").val(r.lng);
                            $(elm).parent().prev().find(":text").val(r.lat);
                        });
 
                    });
                }
 
            </script>
        <div class="row row-fix">
            <div class="col-xs-4 col-sm-4">
                <input type="text" name="map[lng]" value="108.896566" placeholder="地理經度"  class="form-control" />
            </div>
            <div class="col-xs-4 col-sm-4">
                <input type="text" name="map[lat]" value="34.227563" placeholder="地理緯度"  class="form-control" />
            </div>
            <div class="col-xs-4 col-sm-4">
                <button onclick="showCoordinate(this);" class="btn btn-default" type="button">選擇坐標</button>
            </div>
        </div>                            </div>
                        </div>

 

注意：如果出現鑒權失敗的話，請打開配置文件修改key 

文件路徑：/web/resource/js/app/config.js  搜索qqmap

文件路徑：/web/resource/js/require.js  搜索qqmap