1.首先我們打開騰訊地圖官網：https://lbs.qq.com/webApi/component/componentGuide/componentPicker
騰訊地圖模糊搜索地址，
直接復制代碼粘貼即可，
<iframe id="mapPage" width="100%" height="100%" frameborder=0
src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=your key&referer=myapp">
</iframe>
<script>
window.addEventListener('message', function(event) {
// 接收位置資訊，用戶選擇確認位置點后選點組件會觸發該事件，回傳用戶的位置資訊
var loc = event.data;
if (loc && loc.module == 'locationPicker') {//防止其他應用也會向該頁面post資訊，需判斷module是否為'locationPicker'
console.log('location', loc);
}
}, false);
</script>
回傳的位置資訊格式
{
module:'locationPicker',
latlng: {
lat: 39.998766,
lng: 116.273938
},
poiaddress: "北京市海淀區新建宮門路19號",
poiname: "頤和園",
cityname: "北京市"
}
2.廢話不多說，直接上代碼：
{block name="content"}
{include file='service/formstyle'}
<div class="layui-card-body padding-left-40">
<form onsubmit="return false;" id="GoodsForm" data-auto="true" method="post" class='layui-form layui-card table-block' autocomplete="off">
<div class="layui-card-body">
<div class="layui-row layui-col-space15">
<div class="layui-col-xs5">
<label class="block relative">
<span class="color-green font-w7">服務點名稱</span>
<span class="color-desc margin-left-5">serviceName</span>
<input name="serviceName" value='{$vo.serviceName|default=""}' required placeholder="請輸入服務點名稱"
class="layui-input">
<p class="help-block"><b>必選</b>，請填寫服務點名稱</p>
</label>
</div>
<div class="layui-col-xs5">
<label class="block relative">
<span class="color-green font-w7">服務點電話</span>
<span class="color-desc margin-left-5">servicePhone</span>
<input type="tel" name="servicePhone" value='{$vo.servicePhone|default=""}' required
placeholder="請輸入服務點電話"
class="layui-input">
<p class="help-block"><b>必選</b>，請填寫服務點電話</p>
</label>
</div>
</div>
<div class="layui-row layui-col-space15">
<div class="layui-col-xs5">
<label class="relative block">
<span class="color-green font-w7">服務點地址</span><span class="color-desc margin-left-5">serviceAddress</span>
<input name="serviceAddress" value='{$vo.serviceAddress|default=""}' required
placeholder="請輸入服務點地址"
class="layui-input">
<span class="color-desc">可選，請填寫服務點地址</span>
</label>
</div>
<div class="layui-col-xs5">
<label class="relative block">
<span class="color-green font-w7">服務點詳細地址</span><span class="color-desc margin-left-5">serviceAddressDetail</span>
<input name="serviceAddressDetail" value='{$vo.serviceAddressDetail|default=""}' required
placeholder="請輸入服務點詳細地址"
class="layui-input">
<span class="color-desc">可選，請填寫服務點詳細地址</span>
</label>
</div>
</div>
<div class="hr-line-dashed margin-top-10 margin-bottom-10"></div>
<div class="layui-row layui-col-space15">
<div class="layui-col-xs5">
<label class="relative block">
<span class="color-green font-w7">開始營業時間</span><span class="color-desc margin-left-5">serviceStart</span>
<input data-date name="serviceStart" value='{$vo.serviceStart|default=""}' required
placeholder="服務點開始營業時間"
class="layui-input">
<span class="color-desc">可選，服務點開始營業時間</span>
</label>
</div>
<div class="layui-col-xs5">
<label class="relative block">
<span class="color-green font-w7">結束營業時間</span><span
class="color-desc margin-left-5">serviceEnd</span>
<input data-date name="serviceEnd" value='{$vo.serviceEnd|default=""}' required
placeholder="服務點開始營業時間"
class="layui-input">
<span class="color-desc">可選，服務點開始營業時間</span>
</label>
</div>
</div>
<div class="layui-col-xs5">
<label class=" block ">
<span class="color-green font-w7">營業狀態</span><br>
{if isset($vo.isService)}
{if $vo.isService==1 }
<label class="think-radio "><input type="radio" value="1" name="isService" title="營業中" checked=""
lay-ignore="">營業中</label>
<label class="think-radio"><input type="radio" value="0" name="isService" title="休息中" lay-ignore="">休息中</label>
{else}
<label class="think-radio "><input type="radio" value="1" name="isService" title="營業中"
lay-ignore="">營業中</label>
<label class="think-radio"><input type="radio" value="0" name="isService" title="休息中" checked=""
lay-ignore="">休息中</label>
{/if}
{else /}
<label class="think-radio "><input type="radio" value="1" name="isService" title="營業中" checked=""
lay-ignore="">營業中</label>
<label class="think-radio"><input type="radio" value="0" name="isService" title="休息中" lay-ignore="">休息中</label>
{/if}
</label>
</div>
<div class="layui-col-xs5">
<label class=" block ">
<span class="color-green font-w7">是否總店</span><br>
{if isset($vo.parentId)}
{if $vo.parentId==0 }
<label class="think-radio "><input type="radio" value="0" name="parentId" title="總店" checked=""
lay-ignore="">總店</label>
<label class="think-radio"><input type="radio" value="1" name="parentId" title="服務點" lay-ignore="">服務點</label>
{else /}
<label class="think-radio "><input type="radio" value="0" name="parentId" title="總店" lay-ignore="">總店</label>
<label class="think-radio"><input type="radio" value="1" name="parentId" title="服務點" checked=""
lay-ignore="">服務點</label>
{/if}
{else /}
<label class="think-radio "><input type="radio" value="0" name="parentId" title="總店" lay-ignore="">總店</label>
<label class="think-radio"><input type="radio" value="1" name="parentId" title="服務點" checked=""
lay-ignore="">服務點</label>
{/if}
</label>
</div>
<div class="layui-form-item">
<span class="color-green font-w7 label-required-prev">服務點LOGO及服務點相冊</span>
<table class="layui-table">
<thead>
<tr>
<th style="width:90px" class="text-center">服務點logo</th>
<th class="text-left">服務點相冊</th>
</tr>
<tr>
<td class="text-center">
<input name="serviceLogo" type="hidden" value="{$vo.serviceLogo|default=''}">
<script>$('[name="serviceLogo"]').uploadOneImage();</script>
</td>
<td class="text-left">
<input name="serviceImages" type="hidden" value="{$vo.serviceImages|default=''}">
<script>$('[name="serviceImages"]').uploadMultipleImage();</script>
</td>
</tr>
</thead>
</table>
</div>
<div class="layui-form-item">
<div class="color-green font-w7">經緯度定位</div>
<label class="relative block">
<input id="position" name="position" value="{$vo.serviceLatitude},{$vo.serviceLongitude}"
class="layui-input" placeholder="請選擇服務點定位">
<a data-copy="{$vo.serviceLatitude},{$vo.serviceLongitude}" class="fa fa-copy input-right-icon"></a>
</label>
<div class="help-block">騰訊地圖定位</div>
</div>
</div>
<div class="hr-line-dashed"></div>
{notempty name='vo.id'}<input type='hidden' value='{$vo.id}' name='id'>{/notempty}
{notempty name='vo.createTime'}<input type='hidden' value='{$vo.createTime}' name='createTime'>{/notempty}
<div class="layui-form-item text-center">
<button class="layui-btn layui-btn-danger" ng-click="pageBack()" type="button">取消編輯</button>
<button class="layui-btn" type="submit">保存資料</button>
</div>
</form>
</div>
<iframe id="mapPage" width="100%" height="100%" frameborder=0
src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=**這里填你自己的地圖的KEY**&referer=myapp">
</iframe>
{/block}
{block name='script'}
<script>
/*! 表單初始化 */
window.form.render();
/*! 加載擴展插件 */
require(['ckeditor', 'angular'], function () {
window.createEditor('[name="projectDesc"]', {height: 500});
var app = angular.module("GoodsForm", []).run(callback);
angular.bootstrap(document.getElementById(app.name), [app.name]);
function getRand(length, prefix) {
return (function (time, code) {
code += parseInt(time.substr(0, 1)) + parseInt(time.substr(1, 1)) + time.substr(2, 8);
while (code.length < length) code += Math.round(Math.random() * 10);
return code;
})(Date.now().toString(), prefix || '' + '')
}
function callback($rootScope) {
$rootScope.pageBack = function () {
$.msg.confirm('確定要取消編輯嗎？', function (index) {
history.back(), $.msg.close(index);
});
};
/*! 去除空白字符 */
$rootScope.trimSpace = function (value) {
return (value + '').replace(/\s*/ig, '');
};
}
});
window.addEventListener('message', function(event) {
// 接收位置資訊，用戶選擇確認位置點后選點組件會觸發該事件，回傳用戶的位置資訊
var loc = event.data;
if (loc && loc.module == 'locationPicker') {
//防止其他應用也會向該頁面post資訊，需判斷module是否為'locationPicker'
console.log( loc.latlng.lat);
$("#position").val(loc.latlng.lat+","+loc.latlng.lng);
}
},false);
</script>
{/block}
效果圖：
注意：我用的框架是ThinkAdmin v6 ，這里地圖直接用以上代碼可以實作騰訊地圖的地址搜索，獲取地址的經緯度，告辭！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/249915.html
標籤：其他
上一篇：制作一個簡單的計算器JavaScript、html、css
下一篇：jQuery簡單影片操作