騰訊地圖位置
2
html
<style type="text/css">
.ismap .maps {
height: 380px;
width: 550px;
overflow: hidden;
border: 1px solid #E4E4E4;
}
</style>
<div class="form-group">
<label class="col-xs-12 col-sm-3 col-md-2 control-label">公司地址</label>
<div class="col-sm-4">
<input type="text" name="address" value="{$item['address']}" placeholder="輸入詳細地址，如：杏林灣營運中心9號樓"
autocomplete="off" id="address" class="form-control">
<a href="javascript:;" class="layui-btn layui-btn-normal floatleft btn btn-success" id="selectshop"
onClick="codeAddress();">定位</a>
<div class="ismap">
<div class="maps" id="dituContent"></div>
<br/>
<p class="red">輸入完整地址後，點擊定位獲得商戶的經緯度（如定位不準，可手動拖動定位）</p>
<br/>
<p>當前經緯度：
<input class="hrefto jing layui-input" readonly="readonly" style="display: inline-block;"
type="text" name="lng" value="{$item['lng']}"/>
<input class="hrefto wei layui-input" readonly="readonly" type="text"
style="display: inline-block;" name="lat" value="{$item['lat']}"/></p>
</div>
</div>
</div>
js
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&libraries=place&key={$map_key}"></script>
<script type="text/javascript">
$(function(){
$("#frame-5").show();
$("#yframe-5").addClass("wyactive");
})
</script>
<script>
var namestr = "{$item['address']}"
var lng = "{$item['lng']}";
var lat = "{$item['lat']}";
$(function(){
if (namestr != null && namestr != '') {
var center = new qq.maps.LatLng(lat, lng);
var map = new qq.maps.Map(document.getElementById('dituContent'), {
center: center,
zoom: 13
});
var marker = new qq.maps.Marker({
position: center,
draggable: true,
map: map
});
geocoder = new qq.maps.Geocoder({
complete: function (result) {
// $('input[name=address]').val(result.detail.address);
map.setCenter(result.detail.location);
marker.setPosition(result.detail.location);
var weizhi1 = marker.getPosition();
$('input[name=lat]').val(weizhi1.lat);
$('input[name=lng]').val(weizhi1.lng);
}
});
var ap = new qq.maps.place.Autocomplete(document.getElementById('address'));
//調用Poi檢索類。用於進行本地檢索、周邊檢索等服務。
var searchService = new qq.maps.SearchService({
map: map
});
//添加監聽事件
qq.maps.event.addListener(ap, "confirm", function (res) {
geocoder.getLocation(res.value);
//若服務請求失敗，則運行以下函數
geocoder.setError(function () {
alert("出錯了，請輸入正確的地址！！！");
});
});
qq.maps.event.addListener(marker, 'dragend', function (event) {
var latLng = event.latLng,
lat = latLng.getLat(),
lng = latLng.getLng();
// var coord = new qq.maps.LatLng(lat,lng);
// geocoder.getAddress(coord);
$('input[name=lat]').val(lat);
$('input[name=lng]').val(lng);
});
} else {
// console.log(5);
// $(".ismap").show();
// var center = new qq.maps.LatLng(39.916527,116.397128);
// map = new qq.maps.Map(document.getElementById('dituContent'),{
// center: center,
// zoom: 13
// });
// //獲取城市列表接口設置中心點
// citylocation = new qq.maps.CityService({
// complete : function(result){
// map.setCenter(result.detail.latLng);
// if (marker != null) {
// marker.setMap(null);
// }
// //設置marker標記
// marker = new qq.maps.Marker({
// map: map,
// position: results.detail.latLng
// });
// }
// });
//// var marker = new qq.maps.Marker({
//// position: center,
//// map: map
//// });
// //調用searchLocalCity();方法 根據用戶IP查詢城市信息。
// citylocation.searchLocalCity();
}
})
//清除地圖上的marker
// function clearOverlays(overlays) {
// var overlay;
// while(overlay = overlays.pop()) {
// overlay.setMap(null);
// }
// }
function codeAddress() {
var address = document.getElementById("address").value;
//通過getLocation();方法獲取位置信息值
if (namestr != null && namestr != '') {
geocoder.getLocation(address);
} else {
var center = new qq.maps.LatLng(39.916527, 116.397128);
var map = new qq.maps.Map(document.getElementById('dituContent'), {
center: center,
zoom: 13
});
function replaceLikeVal(comp) {
if (comp.value.indexOf("'") != -1 || comp.value.indexOf("\"") != -1) {
//comp.value = comp.value.substring(0, comp.value.length-1);
comp.value = comp.value.replace(/\'/g, "").replace(/\"/g, "");
}
};
var searchService, markers = [];
//設置Poi檢索服務，用於本地檢索、周邊檢索
searchService = new qq.maps.SearchService({
//檢索成功的回調函數
complete: function (results) {
//設置回調函數參數
var pois = results.detail.pois;
if (!pois) {
// alert('請輸入詳細的地址(xxx市xxx縣xxx鎮xxx)');
alert("請輸入詳細的地址");
}
var infoWin = new qq.maps.InfoWindow({
map: map
});
var latlngBounds = new qq.maps.LatLngBounds();
for (var i = 0, l = pois.length; i < l; i++) {
var poi = pois[i];
//擴展邊界範圍，用來包含搜索到的Poi點
latlngBounds.extend(poi.latLng);
(function (n) {
var marker = new qq.maps.Marker({
position: center,
draggable: true,
map: map
});
marker.setPosition(pois[n].latLng);
marker.setTitle(i + 1);
markers.push(marker);
$('.wei').val(pois[n].latLng.lat);
$('.jing').val(pois[n].latLng.lng);
qq.maps.event.addListener(marker, 'dragend', function (event) {
var latLng = event.latLng,
lat = latLng.getLat(),
lng = latLng.getLng();
// var coord = new qq.maps.LatLng(lat,lng);
// geocoder.getAddress(coord);
$('.jing').val(lng);
$('.wei').val(lat);
});
})(i);
}
//調整地圖視野
map.fitBounds(latlngBounds);
},
//若服務請求失敗，則運行以下函數
error: function () {
alert('請輸入有效地址')
}
});
$(".map").show();
var keyword = document.getElementById("address").value;
console.log(keyword);
var region = '';
var pageIndex = 0;
var pageCapacity = 1;
// clearOverlays(markers);
//根據輸入的城市設置搜索範圍
searchService.setLocation(region);
//設置搜索頁碼
searchService.setPageIndex(pageIndex);
//設置每頁的結果數
searchService.setPageCapacity(pageCapacity);
//根據輸入的關鍵字在搜索範圍內檢索
searchService.search(keyword);
//根據輸入的關鍵字在圓形範圍內檢索
//var region = new qq.maps.LatLng(39.916527,116.397128);
//searchService.searchNearBy(keyword, region , 2000);
//根據輸入的關鍵字在矩形範圍內檢索
//region = new qq.maps.LatLngBounds(new qq.maps.LatLng(39.936273,116.440043),new qq.maps.LatLng(39.896775,116.354212));
//searchService.searchInBounds(keyword, region);
}
}
</script>