gdmap.html 3.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <div class="">
  2. <input type="text" readonly class="form-control" id="map_maploaction_{$name}" name="{$name}" value="{$val}" style="margin-bottom: 5px;">
  3. <button id="gdmap_start_stop_{$name}" data-flag="1" onclick="changeBtn(this)" class="btn btn-sm btn-primary" type="button">开始标注</button>
  4. <input type="text" id="gdmap_pickerInput_{$name}" class="search form-control" placeholder="搜索地址">
  5. <div id="gdmap_container_{$name}" style="width:100%; height:300px"></div>
  6. </div>
  7. <script type="text/javascript">
  8. window._AMapSecurityConfig = {
  9. securityJsCode:"{:config('app.gdkey')}",
  10. }
  11. </script>
  12. <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key={:config('app.gdmap')}"></script>
  13. <script src="https://webapi.amap.com/ui/1.0/main.js"></script>
  14. <script type="text/javascript">
  15. var map = new AMap.Map('gdmap_container_{$name}', {
  16. zoom: 16,
  17. scrollWheel: true
  18. });
  19. var latlng = "{$val}";
  20. var lat = "";
  21. var lng = "";
  22. if(latlng){
  23. latlngs = latlng.split('-');
  24. lat = latlngs[0];
  25. lng = latlngs[1];
  26. }
  27. if(lat != ''){
  28. map.setCenter([lng,lat]);
  29. }
  30. //地图中添加地图操作ToolBar插件
  31. map.plugin(['AMap.ToolBar'], function() {
  32. var toolBar = new AMap.ToolBar();
  33. map.addControl(toolBar);
  34. });
  35. AMapUI.loadUI(['misc/PositionPicker','misc/PoiPicker'], function(PositionPicker,PoiPicker) {
  36. var positionPicker = new PositionPicker({
  37. mode: 'dragMap', //dragMap-拖拽地图 dragMarker-拖拽marker
  38. map: map,
  39. });
  40. positionPicker.on('success', function(positionResult) {
  41. var geocoder = new AMap.Geocoder();
  42. //地理编码,返回地理编码结果
  43. geocoder.getLocation(positionResult.address, function(status, result) {
  44. console.log('result',result,status,$('#gdmap_start_stop_{$name}').attr('data-flag'));
  45. if($('#gdmap_start_stop_{$name}').attr('data-flag') == 0){
  46. if (status === 'complete' && result.info === 'OK') {
  47. console.log(positionResult.position.lat+'-'+positionResult.position.lng);
  48. $('#map_maploaction_{$name}').val(positionResult.position.lat+'-'+positionResult.position.lng);
  49. }
  50. }
  51. });
  52. });
  53. positionPicker.start();
  54. var poiPicker = new PoiPicker({
  55. input: 'gdmap_pickerInput_{$name}'
  56. });
  57. poiPickerReady(poiPicker);
  58. });
  59. function poiPickerReady(poiPicker) {
  60. //选取了某个POI
  61. poiPicker.on('poiPicked', function(poiResult) {
  62. var poi = poiResult.item;
  63. map.setCenter(poi.location);
  64. });
  65. }
  66. function changeBtn(_self){
  67. var flag = $(_self).attr('data-flag');
  68. if(flag == 1){
  69. $(_self).attr('data-flag',0).html('结束标注');
  70. }else{
  71. $(_self).attr('data-flag',1).html('开始标注');
  72. }
  73. }
  74. </script>