<div class="layui-form-item">
<label class="layui-form-label">
地址
</label>
<div class="layui-input-block">
<body onload="init()"></body>
<input type="text" name="address" id="place" value="{$config.address|default=\'\'}" lay-verify="required" class="layui-input" placeholder="请输入地址">
<input type="text" name="latitude" id="latitude" value="{$config.latitude|default=\'\'}" lay-verify="required" readonly="">
<input type="text" name="longitude" id="longitude" value="{$config.longitude|default=\'\'}" lay-verify="required" readonly="">
<span id="city"></span>
<div id="container" style="height:400px;"></div>
</div>
</div>
<!-- 地图 -->
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=自己在腾讯地图申请的key&libraries=place"></script>
<script type="text/javascript">
//调用方法
var geocoder,map, marker = null;
var init = function(){
var longitude = "{$config.longitude}";
var latitude = "{$config.latitude}";
if(longitude != \'\' && latitude != \'\'){
var lat= latitude;
var lng = longitude;
}else{
//获取城市列表接口设置中心点
citylocation = new qq.maps.CityService({
complete : function(result){
map.setCenter(result.detail.latLng);
}
});
//调用searchLocalCity();方法 根据用户IP查询城市信息。
citylocation.searchLocalCity();
var lat= 23.148963;
var lng = 113.257788;
}
var center = new qq.maps.LatLng(lat,lng);
var map = new qq.maps.Map(document.getElementById("container"),{
center: center,
zoom: 16
});
//Marker覆盖物
var anchor = new qq.maps.Point(6, 6),
size = new qq.maps.Size(64, 64),
origin = new qq.maps.Point(0, 0),
icon = new qq.maps.MarkerImage(\'/static/common/image/location.png\', size, origin, anchor); //引用自己定义的图标
var marker = new qq.maps.Marker({
position:center,
animation:qq.maps.MarkerAnimation.DROP,
map:map,
icon:icon,
});
//实例化自动完成
var ap = new qq.maps.place.Autocomplete(document.getElementById(\'place\'));
//调用Poi检索类。用于进行本地检索、周边检索等服务。
var searchService = new qq.maps.SearchService({
map : map
});
//添加监听事件
qq.maps.event.addListener(ap, "confirm", function(res){
searchService.search(res.value);
});
//添加监听事件 获取鼠标单击事件
qq.maps.event.addListener(map, \'click\', function(event) {
console.log(event,\'测试测试\');
//Marker覆盖物
var marker=new qq.maps.Marker({
position:event.latLng,
map:map
});
qq.maps.event.addListener(map, \'click\', function(event) {
marker.setMap(null);
});
var jw = event.latLng;
var latLng = new qq.maps.LatLng(jw["lat"], jw["lng"]);
//调用信息窗口
var info = new qq.maps.InfoWindow({map: map});
//调用获取位置方法
geocoder.getAddress(latLng);
});
var info = new qq.maps.InfoWindow({map: map});
geocoder = new qq.maps.Geocoder({
complete : function(result){
console.log(result,\'地址\');
// var b = result.detail.addressComponents;
//b.province+b.city+b.district+b.town+b.street+
var b = result.detail;
console.log(b.nearPois[0].address,\'-*-*-*-\',b.nearPois[0].name);
$(\'#place\').val(b.nearPois[0].address+b.nearPois[0].name);
var lat = b.location.lat;
var lng = b.location.lng;
$(\'#latitude\').val(lat);
$(\'#longitude\').val(lng);
}
});
}
</script>