thinkphp5 后台前端使用腾讯地图获取位置信息

最新推荐文章于 2022-11-12 14:45:55 发布

Chen_2017_Strive

最新推荐文章于 2022-11-12 14:45:55 发布

阅读量2.9k

点赞数 1

文章标签：后台前端获取经纬度

本文链接：https://blog.csdn.net/Chen_2017_Strive/article/details/86736862

版权

<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);

});

Chen_2017_Strive

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
thinkphp5 后台前端使用腾讯地图获取位置信息

&lt;div class="layui-form-item"&gt; &lt;label class="layui-form-label"&gt; 地址 &lt;/label&gt; &lt;div class="layui-input-block"&gt;
复制链接

扫一扫