杨育虎 / thinkcmfDemo2 · 提交

转到一个项目

作者 杨育虎
提交 5936e45fa423f6ff8361023a3a32b2419b741a6c 1 个父辈 c83a71b5

腾讯地图

内嵌 并排对比
正在显示 3 个修改的文件 包含 216 行增加 和 1 行删除
... ... @@ -7,6 +7,7 @@
namespace app\admin\controller;
use cmf\controller\AdminBaseController;
use think\Db;
class DialogController extends AdminBaseController
{
... ... @@ -26,4 +27,30 @@ class DialogController extends AdminBaseController
return $this->fetch();
}
public function map2()
{
$location = $this->request->param('location');
$location = explode(',', $location);
$lng = empty($location[0]) ? 116.424966 : $location[0];
$lat = empty($location[1]) ? 39.907851 : $location[1];
$this->assign(['lng' => $lng, 'lat' => $lat]);
return $this->fetch();
}
public function getShopHtml(){
$data = $this->request->param();
$where=[];
if (!empty($data['category_id'])) {
$where['category_id']=$data['category_id'];
}
$list=Db::name('shop')->where($where)->select()->toArray();
if(!empty($list)){
$this->success('','',$list);
}else{
$this->error('该分类下没有店铺');
}
}
}
\ No newline at end of file
... ...
... ... @@ -101,6 +101,7 @@
function mgetLocation(point) {
gc.getLocation(point, function (rs) {
console.log(rs);
var addComp = rs.addressComponents;
marker.openInfoWindow(new BMap.InfoWindow(rs.address, opts));
document.getElementById("address_input").value = rs.address;
... ... @@ -132,7 +133,6 @@
data.city = document.getElementById("city_input").value;
data.province = document.getElementById("province_input").value;
data.district = document.getElementById("district_input").value;
return data;
}
</script>
... ...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style type="text/css">
html,body{
width:100%;
height:100%;
}
*{
margin:0px;
padding:0px;
}
body, button, input, select, textarea {
font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
p{
width:603px;
padding-top:3px;
overflow:hidden;
}
#container{
min-width:600px;
min-height:767px;
}
.btn{
width:142px;
}
</style>
<title>点击地图获取当前经纬度</title>
</head>
<body>
<input style="width:200px;padding:3px 4px;" type="text" id="place" placeholder="请输入地址"/>
<input style="width:200px;padding:3px 4px;" type="text" id="address_input" value="" placeholder="腾讯地址">
<input style="width:120px;padding:3px 4px;" id="lng_input" type="number" value="{$lng}" placeholder="经度"/>
<input style="width:120px;padding:3px 4px;" id="lat_input" type="number" value="{$lat}" placeholder="纬度"/>
<input id="city_input" type="hidden"/>
<input id="province_input" type="hidden"/>
<input id="district_input" type="hidden"/>
<div id="container"></div>
<script>
var markersArray = [];
var searchService,markers = [];
function init() {
//设置地图中心点
var myLatlng = new qq.maps.LatLng({$lat}, {$lng});
//定义工厂模式函数
var myOptions = {
zoom: 16, //设置地图缩放级别
center: myLatlng, //设置中心点样式
mapTypeId: qq.maps.MapTypeId.ROADMAP //设置地图样式详情参见MapType
}
//获取dom元素添加地图信息
var map = new qq.maps.Map(document.getElementById("container"), myOptions);
//实例化自动完成
var ap = new qq.maps.place.Autocomplete(document.getElementById('place'));
//设置Poi检索服务，用于本地检索、周边检索
searchService = new qq.maps.SearchService({
//检索成功的回调函数
complete: function(results) {
//设置回调函数参数
var pois = results.detail.pois;
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({
map: map
});
marker.setPosition(pois[n].latLng);
marker.setTitle(i + 1);
markers.push(marker);
qq.maps.event.addListener(marker, 'click', function() {
infoWin.open();
infoWin.setContent('<div style="width:280px;height:80px;">名称：' + pois[n].name + '<br/><br/>地址：' + pois[n].address + '</div>');
infoWin.setPosition(pois[n].latLng);
document.getElementById('address_input').value=pois[n].address;
document.getElementById('lng_input').value=pois[n].latLng.lng;
document.getElementById('lat_input').value=pois[n].latLng.lat;
});
})(i);
}
//调整地图视野
map.fitBounds(latlngBounds);
},
//若服务请求失败，则运行以下函数
error: function() {
alert("出错了。");
}
});
//添加监听事件
qq.maps.event.addListener(ap, "confirm", function(res){
clearOverlays(markers);
searchService.search(res.value);
});
geocoder = new qq.maps.Geocoder({
complete : function(result){
document.getElementById('address_input').value=result.detail.address;
document.getElementById('province_input').value=result.detail.addressComponents.province;
document.getElementById('city_input').value=result.detail.addressComponents.city;
document.getElementById('district_input').value=result.detail.addressComponents.district;
}
});
geocoder.getAddress(myLatlng);
var marker = new qq.maps.Marker({
position: myLatlng,
map: map
});
markersArray.push(marker);
var listener=qq.maps.event.addListener(map, 'click', function(event) {
deleteOverlays();
var myLatlng = new qq.maps.LatLng(event.latLng.getLat(),event.latLng.getLng());
var marker = new qq.maps.Marker({
position: myLatlng,
map: map
});
geocoder.getAddress(myLatlng);
markersArray.push(marker);
var lng=event.latLng.getLng();
var lat=event.latLng.getLat();
document.getElementById('lng_input').value=lng.toFixed(6);
document.getElementById('lat_input').value=lat.toFixed(6);
});
}
function deleteOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
//清除地图上的marker
function clearOverlays(overlays) {
var overlay;
while (overlay = overlays.pop()) {
overlay.setMap(null);
}
}
//异步加载地图库函数文件
function loadScript() {
//创建script标签
var script = document.createElement("script");
//设置标签的type属性
script.type = "text/javascript";
//设置标签的链接地址
script.src = "https://map.qq.com/api/js?v=2.exp&callback=init&libraries=place";
//添加标签到dom
document.body.appendChild(script);
}
window.onload = loadScript; // dom文档加载结束开始加载 此段代码
function confirm() {
var data = {};
data.lng = document.getElementById("lng_input").value;
data.lat = document.getElementById("lat_input").value;
data.address = document.getElementById("address_input").value;
data.city = document.getElementById("city_input").value;
data.province = document.getElementById("province_input").value;
data.district = document.getElementById("district_input").value;
return data;
}
</script>
</body>
</html>
... ...