map.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
  1. {extend name="default/base/base_seller" /}
  2. {block name="seller_main"}
  3. <!--{if $Think.config.ds_config.mapak_type eq '1'}-->
  4. <script type="text/javascript">
  5. window._AMapSecurityConfig = {
  6. securityJsCode:"{$Think.config.ds_config.gaode_jscode}",
  7. }
  8. </script>
  9. <script type="text/javascript" src="//webapi.amap.com/maps?v=2.0&key={$Think.config.ds_config.gaode_ak}"></script>
  10. <!--{else}-->
  11. <script type="text/javascript" src="{$Think.HTTP_TYPE}api.map.baidu.com/api?v=2.0&ak={$Think.config.ds_config.baidu_ak}"></script>
  12. <!--{/if}-->
  13. <script>
  14. var local;
  15. var map;
  16. var lst_name = '';
  17. function change_map() {
  18. if ($("#area_ select:eq(0)").length > 0 && $("#area_ select:eq(0) option:selected").val() != '') {
  19. var name = $("#area_ select:eq(0) option:selected").text();
  20. }
  21. if ($("#area_ select:eq(1)").length > 0 && $("#area_ select:eq(1) option:selected").val() != '') {
  22. var name = $("#area_ select:eq(1) option:selected").text();
  23. }
  24. if ($("#area_ select:eq(2)").length > 0 && $("#area_ select:eq(2) option:selected").val() != '') {
  25. var name = $("#area_ select:eq(2) option:selected").text();
  26. }
  27. if({$Think.config.ds_config.mapak_type} == '2' ){
  28. if (name != '' && lst_name != name) {
  29. lst_name = name;
  30. map.setCurrentCity(name);
  31. map.centerAndZoom(name, 16);
  32. map.clearOverlays();
  33. local.search(name);
  34. }
  35. }
  36. }
  37. $(function () {
  38. $('#company_address').ds_region();
  39. var lng = '{$store_info.store_longitude}';
  40. var lat = '{$store_info.store_latitude}';
  41. if({$Think.config.ds_config.mapak_type} == '1' ){
  42. var map = new AMap.Map("allmap", {
  43. resizeEnable: true,
  44. zoom:15
  45. });
  46. if (!lng && !lat) {
  47. AMap.plugin("AMap.CitySearch", function () {
  48. var citySearch = new AMap.CitySearch();
  49. citySearch.getLocalCity(function (status, result) {
  50. if (status === "complete" && result.info === "OK") {
  51. // 查询成功,result即为当前所在城市信息
  52. AMap.plugin("AMap.Geocoder", function () {
  53. var geocoder = new AMap.Geocoder({
  54. // city 指定进行编码查询的城市,支持传入城市名、adcode 和 citycode
  55. city: result.adcode,
  56. });
  57. geocoder.getLocation(result.city, function(status1, result1) {
  58. var location = result1.geocodes[0].location;
  59. var lng = location.lng;
  60. var lat = location.lat;
  61. //初始化定位
  62. var marker = new AMap.Marker({
  63. position: new AMap.LngLat(lng, lat),
  64. icon: '//api.map.baidu.com/images/marker_red_sprite.png',
  65. zoom: 15
  66. });
  67. map.add(marker);
  68. document.getElementById("longitude").value = lng;
  69. document.getElementById("latitude").value = lat;
  70. map.panTo([lng, lat]);
  71. //搜索定位
  72. AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], function(){
  73. var auto = new AMap.AutoComplete({input:"store_address"});
  74. var placeSearch = new AMap.PlaceSearch({
  75. map: map
  76. }); //构造地点查询类
  77. auto.on("select", select);//注册监听,当选中某条记录时会触发
  78. function select(e) {
  79. placeSearch.setCity(e.poi.adcode);
  80. placeSearch.search(e.poi.name); //关键字查询查询
  81. document.getElementById("longitude").value = e.poi.location.lng;
  82. document.getElementById("latitude").value = e.poi.location.lat;
  83. map.panTo([e.poi.location.lng, e.poi.location.lat]);
  84. }
  85. });
  86. //点击定位
  87. map.on('click', function(e) {
  88. document.getElementById("longitude").value = e.lnglat.getLng();
  89. document.getElementById("latitude").value = e.lnglat.getLat();
  90. if(marker){
  91. map.remove(marker);
  92. }
  93. marker = new AMap.Marker({
  94. position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()),
  95. icon: '//api.map.baidu.com/images/marker_red_sprite.png',
  96. anchor: 'bottom-center',
  97. zoom: 15
  98. });
  99. map.add(marker);
  100. });
  101. });
  102. });
  103. }
  104. });
  105. });
  106. }else{
  107. map.panTo([lng, lat]);
  108. //初始化定位
  109. var marker = new AMap.Marker({
  110. position: new AMap.LngLat(lng, lat),
  111. icon: '//api.map.baidu.com/images/marker_red_sprite.png',
  112. zoom: 15
  113. });
  114. map.add(marker);
  115. document.getElementById("longitude").value = lng;
  116. document.getElementById("latitude").value = lat;
  117. //搜索定位
  118. AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], function(){
  119. var auto = new AMap.AutoComplete({input:"store_address"});
  120. var placeSearch = new AMap.PlaceSearch({
  121. map: map
  122. }); //构造地点查询类
  123. auto.on("select", select);//注册监听,当选中某条记录时会触发
  124. function select(e) {
  125. placeSearch.setCity(e.poi.adcode);
  126. placeSearch.search(e.poi.name); //关键字查询查询
  127. }
  128. });
  129. //点击定位
  130. map.on('click', function(e) {
  131. document.getElementById("longitude").value = e.lnglat.getLng();
  132. document.getElementById("latitude").value = e.lnglat.getLat();
  133. if(marker){
  134. map.remove(marker);
  135. }
  136. marker = new AMap.Marker({
  137. position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()),
  138. icon: '//api.map.baidu.com/images/marker_red_sprite.png',
  139. anchor: 'bottom-center',
  140. zoom: 15
  141. });
  142. map.add(marker);
  143. });
  144. }
  145. }else{
  146. if (!lng && !lat) {
  147. map = new BMap.Map("allmap");
  148. var geolocation = new BMap.Geolocation();
  149. geolocation.getCurrentPosition(function (r) {
  150. if (this.getStatus() == BMAP_STATUS_SUCCESS) {
  151. var lng = r.point.lng;
  152. var lat = r.point.lat;
  153. var point = new BMap.Point(lng, lat);
  154. map.centerAndZoom(point, 16);
  155. map.addControl(new BMap.NavigationControl());
  156. map.enableScrollWheelZoom();
  157. var marker = new BMap.Marker(point); // 创建标注
  158. map.addOverlay(marker); // 将标注添加到地图中
  159. marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
  160. document.getElementById("longitude").value = lng;
  161. document.getElementById("latitude").value = lat;
  162. } else {
  163. layer.msg('failed' + this.getStatus());
  164. }
  165. }, {enableHighAccuracy: true})
  166. } else {
  167. var point = new BMap.Point(lng, lat);
  168. map.centerAndZoom(point, 16);
  169. map.addControl(new BMap.NavigationControl());
  170. map.enableScrollWheelZoom();
  171. var marker = new BMap.Marker(point); // 创建标注
  172. map.addOverlay(marker); // 将标注添加到地图中
  173. marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
  174. }
  175. var options = {
  176. onSearchComplete: function (results) {
  177. // 判断状态是否正确
  178. if (local.getStatus() == BMAP_STATUS_SUCCESS) {
  179. if (results.getCurrentNumPois() > 0) {
  180. map.clearOverlays(); //清除标注 或者可以把market 放入数组
  181. var point = new BMap.Point(results.getPoi(0).point.lng, results.getPoi(0).point.lat);
  182. var marker = new BMap.Marker(point);
  183. map.centerAndZoom(point, 16);
  184. map.addOverlay(marker);
  185. marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
  186. document.getElementById("longitude").value = results.getPoi(0).point.lng;
  187. document.getElementById("latitude").value = results.getPoi(0).point.lat;
  188. }
  189. }
  190. }
  191. };
  192. local = new BMap.LocalSearch(map, options);
  193. map.addEventListener("click", function (e) {
  194. // alert(e.point.lng + ", " + e.point.lat);
  195. map.clearOverlays(); //清除标注 或者可以把market 放入数组
  196. var point = new BMap.Point(e.point.lng, e.point.lat);
  197. var marker = new BMap.Marker(point);
  198. map.addOverlay(marker);
  199. marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
  200. document.getElementById("longitude").value = e.point.lng;
  201. document.getElementById("latitude").value = e.point.lat;
  202. });
  203. }
  204. })
  205. </script>
  206. <div class="dssc-form-default">
  207. <form action="{:url('Sellersetting/map')}" method="post" enctype="multipart/form-data" id="my_store_form">
  208. <dl>
  209. <dt>{$Think.lang.home}:</dt>
  210. <dd id="area_" onclick="change_map()">
  211. <input type="hidden" value="{$store_info.area_info}" name="company_address" id="company_address">
  212. <input type="hidden" value="" name="province_id" id="_area_1">
  213. <input type="hidden" value="" name="city_id" id="_area_2">
  214. <input type="hidden" value="{$store_info.region_id}" name="district_id" id="_area_3">
  215. <span></span></dd>
  216. </dl>
  217. <dl>
  218. <dt>{$Think.lang.detailed_address}:</dt>
  219. <dd><input name="company_address_detail" type="text" value="{$store_info.store_address}" class="w200" id="store_address" {if $Think.config.ds_config.mapak_type eq '2'}onkeyup="local.search($(this).val());"{/if}>
  220. <span></span>
  221. <div>
  222. <input name="longitude" id="longitude" value="{$store_info.store_longitude}" type="hidden" />
  223. <input name="latitude" id="latitude" value="{$store_info.store_latitude}" type="hidden" />
  224. <div id="allmap" style="width:530px;height: 350px;margin-top: 20px"></div>
  225. </div>
  226. </dd>
  227. </dl>
  228. <div class="bottom">
  229. <input type="submit" class="submit" value="{$Think.lang.store_goods_class_submit}" />
  230. </div>
  231. </form>
  232. </div>
  233. <script>
  234. $(document).ready(function(){
  235. $('#my_store_form').validate({
  236. submitHandler:function(form){
  237. ds_ajaxpost('my_store_form', 'url', "{:url('Sellersetting/map')}");
  238. },
  239. });
  240. });
  241. </script>
  242. {/block}