微擎后台开发的时候经常需要调用地图。
腾讯地图:
<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