微擎后台调用地图

微擎后台开发的时候经常需要调用地图。

腾讯地图:

<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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

宇凡网络

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值