杨育虎 / thinkcmfDemo2 · 提交

转到一个项目

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

腾讯地图

内嵌 并排对比
正在显示 3 个修改的文件 包含 216 行增加 和 1 行删除
@@ -7,6 +7,7 @@ @@ -7,6 +7,7 @@
7 namespace app\admin\controller; 7 namespace app\admin\controller;
8 8
9 use cmf\controller\AdminBaseController; 9 use cmf\controller\AdminBaseController;
  10 +use think\Db;
10 11
11 class DialogController extends AdminBaseController 12 class DialogController extends AdminBaseController
12 { 13 {
@@ -26,4 +27,30 @@ class DialogController extends AdminBaseController @@ -26,4 +27,30 @@ class DialogController extends AdminBaseController
26 return $this->fetch(); 27 return $this->fetch();
27 } 28 }
28 29
  30 + public function map2()
  31 + {
  32 + $location = $this->request->param('location');
  33 + $location = explode(',', $location);
  34 + $lng = empty($location[0]) ? 116.424966 : $location[0];
  35 + $lat = empty($location[1]) ? 39.907851 : $location[1];
  36 +
  37 + $this->assign(['lng' => $lng, 'lat' => $lat]);
  38 + return $this->fetch();
  39 + }
  40 +
  41 + public function getShopHtml(){
  42 + $data = $this->request->param();
  43 + $where=[];
  44 + if (!empty($data['category_id'])) {
  45 + $where['category_id']=$data['category_id'];
  46 + }
  47 + $list=Db::name('shop')->where($where)->select()->toArray();
  48 + if(!empty($list)){
  49 + $this->success('','',$list);
  50 + }else{
  51 + $this->error('该分类下没有店铺');
  52 + }
  53 +
  54 + }
  55 +
29 } 56 }
@@ -101,6 +101,7 @@ @@ -101,6 +101,7 @@
101 101
102 function mgetLocation(point) { 102 function mgetLocation(point) {
103 gc.getLocation(point, function (rs) { 103 gc.getLocation(point, function (rs) {
  104 + console.log(rs);
104 var addComp = rs.addressComponents; 105 var addComp = rs.addressComponents;
105 marker.openInfoWindow(new BMap.InfoWindow(rs.address, opts)); 106 marker.openInfoWindow(new BMap.InfoWindow(rs.address, opts));
106 document.getElementById("address_input").value = rs.address; 107 document.getElementById("address_input").value = rs.address;
@@ -132,7 +133,6 @@ @@ -132,7 +133,6 @@
132 data.city = document.getElementById("city_input").value; 133 data.city = document.getElementById("city_input").value;
133 data.province = document.getElementById("province_input").value; 134 data.province = document.getElementById("province_input").value;
134 data.district = document.getElementById("district_input").value; 135 data.district = document.getElementById("district_input").value;
135 -  
136 return data; 136 return data;
137 } 137 }
138 </script> 138 </script>
  1 +<!DOCTYPE html>
  2 +<html>
  3 +<head>
  4 + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5 + <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
  6 + <style type="text/css">
  7 + html,body{
  8 + width:100%;
  9 + height:100%;
  10 + }
  11 + *{
  12 + margin:0px;
  13 + padding:0px;
  14 + }
  15 + body, button, input, select, textarea {
  16 + font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
  17 + }
  18 + p{
  19 + width:603px;
  20 + padding-top:3px;
  21 + overflow:hidden;
  22 + }
  23 + #container{
  24 + min-width:600px;
  25 + min-height:767px;
  26 + }
  27 + .btn{
  28 + width:142px;
  29 + }
  30 + </style>
  31 + <title>点击地图获取当前经纬度</title>
  32 +</head>
  33 +<body>
  34 +
  35 +<input style="width:200px;padding:3px 4px;" type="text" id="place" placeholder="请输入地址"/>
  36 +<input style="width:200px;padding:3px 4px;" type="text" id="address_input" value="" placeholder="腾讯地址">
  37 +<input style="width:120px;padding:3px 4px;" id="lng_input" type="number" value="{$lng}" placeholder="经度"/>
  38 +<input style="width:120px;padding:3px 4px;" id="lat_input" type="number" value="{$lat}" placeholder="纬度"/>
  39 +<input id="city_input" type="hidden"/>
  40 +<input id="province_input" type="hidden"/>
  41 +<input id="district_input" type="hidden"/>
  42 +
  43 +<div id="container"></div>
  44 +<script>
  45 +
  46 + var markersArray = [];
  47 + var searchService,markers = [];
  48 +
  49 + function init() {
  50 + //设置地图中心点
  51 + var myLatlng = new qq.maps.LatLng({$lat}, {$lng});
  52 + //定义工厂模式函数
  53 + var myOptions = {
  54 + zoom: 16, //设置地图缩放级别
  55 + center: myLatlng, //设置中心点样式
  56 + mapTypeId: qq.maps.MapTypeId.ROADMAP //设置地图样式详情参见MapType
  57 + }
  58 +
  59 + //获取dom元素添加地图信息
  60 + var map = new qq.maps.Map(document.getElementById("container"), myOptions);
  61 +
  62 + //实例化自动完成
  63 + var ap = new qq.maps.place.Autocomplete(document.getElementById('place'));
  64 + //设置Poi检索服务，用于本地检索、周边检索
  65 + searchService = new qq.maps.SearchService({
  66 + //检索成功的回调函数
  67 + complete: function(results) {
  68 + //设置回调函数参数
  69 + var pois = results.detail.pois;
  70 + var infoWin = new qq.maps.InfoWindow({
  71 + map: map
  72 + });
  73 + var latlngBounds = new qq.maps.LatLngBounds();
  74 + for (var i = 0, l = pois.length; i < l; i++) {
  75 + var poi = pois[i];
  76 + //扩展边界范围，用来包含搜索到的Poi点
  77 + latlngBounds.extend(poi.latLng);
  78 +
  79 + (function(n) {
  80 + var marker = new qq.maps.Marker({
  81 + map: map
  82 + });
  83 + marker.setPosition(pois[n].latLng);
  84 +
  85 + marker.setTitle(i + 1);
  86 + markers.push(marker);
  87 + qq.maps.event.addListener(marker, 'click', function() {
  88 + infoWin.open();
  89 + infoWin.setContent('<div style="width:280px;height:80px;">名称：' + pois[n].name + '<br/><br/>地址：' + pois[n].address + '</div>');
  90 + infoWin.setPosition(pois[n].latLng);
  91 + document.getElementById('address_input').value=pois[n].address;
  92 + document.getElementById('lng_input').value=pois[n].latLng.lng;
  93 + document.getElementById('lat_input').value=pois[n].latLng.lat;
  94 + });
  95 + })(i);
  96 + }
  97 + //调整地图视野
  98 + map.fitBounds(latlngBounds);
  99 + },
  100 + //若服务请求失败，则运行以下函数
  101 + error: function() {
  102 + alert("出错了。");
  103 + }
  104 + });
  105 + //添加监听事件
  106 + qq.maps.event.addListener(ap, "confirm", function(res){
  107 + clearOverlays(markers);
  108 + searchService.search(res.value);
  109 + });
  110 +
  111 + geocoder = new qq.maps.Geocoder({
  112 + complete : function(result){
  113 + document.getElementById('address_input').value=result.detail.address;
  114 + document.getElementById('province_input').value=result.detail.addressComponents.province;
  115 + document.getElementById('city_input').value=result.detail.addressComponents.city;
  116 + document.getElementById('district_input').value=result.detail.addressComponents.district;
  117 + }
  118 + });
  119 + geocoder.getAddress(myLatlng);
  120 +
  121 + var marker = new qq.maps.Marker({
  122 + position: myLatlng,
  123 + map: map
  124 + });
  125 + markersArray.push(marker);
  126 +
  127 + var listener=qq.maps.event.addListener(map, 'click', function(event) {
  128 + deleteOverlays();
  129 + var myLatlng = new qq.maps.LatLng(event.latLng.getLat(),event.latLng.getLng());
  130 + var marker = new qq.maps.Marker({
  131 + position: myLatlng,
  132 + map: map
  133 + });
  134 + geocoder.getAddress(myLatlng);
  135 + markersArray.push(marker);
  136 + var lng=event.latLng.getLng();
  137 + var lat=event.latLng.getLat();
  138 + document.getElementById('lng_input').value=lng.toFixed(6);
  139 + document.getElementById('lat_input').value=lat.toFixed(6);
  140 + });
  141 +
  142 + }
  143 +
  144 + function deleteOverlays() {
  145 + if (markersArray) {
  146 + for (i in markersArray) {
  147 + markersArray[i].setMap(null);
  148 + }
  149 + markersArray.length = 0;
  150 + }
  151 + }
  152 +
  153 + //清除地图上的marker
  154 + function clearOverlays(overlays) {
  155 + var overlay;
  156 + while (overlay = overlays.pop()) {
  157 + overlay.setMap(null);
  158 + }
  159 + }
  160 +
  161 + //异步加载地图库函数文件
  162 + function loadScript() {
  163 + //创建script标签
  164 + var script = document.createElement("script");
  165 + //设置标签的type属性
  166 + script.type = "text/javascript";
  167 + //设置标签的链接地址
  168 + script.src = "https://map.qq.com/api/js?v=2.exp&callback=init&libraries=place";
  169 + //添加标签到dom
  170 + document.body.appendChild(script);
  171 + }
  172 +
  173 + window.onload = loadScript; // dom文档加载结束开始加载 此段代码
  174 +
  175 + function confirm() {
  176 + var data = {};
  177 + data.lng = document.getElementById("lng_input").value;
  178 + data.lat = document.getElementById("lat_input").value;
  179 + data.address = document.getElementById("address_input").value;
  180 + data.city = document.getElementById("city_input").value;
  181 + data.province = document.getElementById("province_input").value;
  182 + data.district = document.getElementById("district_input").value;
  183 + return data;
  184 + }
  185 +</script>
  186 +
  187 +</body>
  188 +</html>