방문자가지도에 위치를 추가하는 방법과 데이터베이스에 저장하는 방법

실제로 나는 사용자가 자신의 비즈니스를 추가 할 수있는 웹 사이트에서 작업하고 있습니다. 지도에 위치를 추가 할 수있는 기능을 제공하고 싶습니다. 지도 세부 정보와 함께 비즈니스 세부 정보를 저장하면 웹 사이트에서 비즈니스를 게시 한 후 해당 위치가지도에 표시되도록 데이터베이스 세부 정보를 저장해야합니다. 즉, 사용자가지도에서 자신의 위치를 추가하고 웹 사이트에서 특정 사용자의지도가 자신의 위치를지도에 표시 할 수있게하고 싶습니다. 나는이 모든 것을 처음 접했으므로 어떻게해야하는지 혼란스러워하고있다. 그러니 제발 도와주세요. Google에서 검색했지만 문제에 대한 도움이 없습니다. 사전에 감사합니다 .... 여기방문자가지도에 위치를 추가하는 방법과 데이터베이스에 저장하는 방법

내 노력 코드 :

 <script type="text/javascript"> 
    function initialize() { 
     var mapOptions = { 
     center: new google.maps.LatLng(-33.8688, 151.2195), 
     zoom: 13, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById('map-canvas'), 
     mapOptions); 

     var input = /** @type {HTMLInputElement} */(document.getElementById('searchTextField')); 
     var autocomplete = new google.maps.places.Autocomplete(input); 

     autocomplete.bindTo('bounds', map); 

     var infowindow = new google.maps.InfoWindow(); 
     var marker = new google.maps.Marker({ 
     map: map 
     }); 

     google.maps.event.addListener(autocomplete, 'place_changed', function() { 
     infowindow.close(); 
     marker.setVisible(false); 
     input.className = ''; 
     var place = autocomplete.getPlace(); 
     if (!place.geometry) { 
      // Inform the user that the place was not found and return. 
      input.className = 'notfound'; 
      return; 
     } 

     // If the place has a geometry, then present it on a map. 
     if (place.geometry.viewport) { 
      map.fitBounds(place.geometry.viewport); 
     } else { 
      map.setCenter(place.geometry.location); 
      map.setZoom(17); // Why 17? Because it looks good. 
     } 
     marker.setIcon(/** @type {google.maps.Icon} */({ 
      url: place.icon, 
      size: new google.maps.Size(71, 71), 
      origin: new google.maps.Point(0, 0), 
      anchor: new google.maps.Point(17, 34), 
      scaledSize: new google.maps.Size(35, 35) 
     })); 
     marker.setPosition(place.geometry.location); 
     marker.setVisible(true); 

     var address = ''; 
     if (place.address_components) { 
      address = [ 
      (place.address_components[0] && place.address_components[0].short_name || ''), 
      (place.address_components[1] && place.address_components[1].short_name || ''), 
      (place.address_components[2] && place.address_components[2].short_name || '') 
      ].join(' '); 
     } 
     var place = autocomplete.getPlace(); 
       document.getElementById('city2').value = place.name; 
       document.getElementById('cityLat').value = place.geometry.location.lat(); 
       document.getElementById('cityLng').value = place.geometry.location.lng(); 
    var latitude = place.geometry.location.lat(); 
    var longitude = place.geometry.location.lng(); 
     infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address); 
     infowindow.open(map, marker); 
     }); 

     // Sets a listener on a radio button to change the filter type on Places 
     // Autocomplete. 
     function setupClickListener(id, types) { 
     var radioButton = document.getElementById(id); 
     google.maps.event.addDomListener(radioButton, 'click', function() { 
      autocomplete.setTypes(types); 
     }); 
     } 

     setupClickListener('changetype-all', []); 
     setupClickListener('changetype-establishment', ['establishment']); 
     setupClickListener('changetype-geocode', ['geocode']); 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 

     </script> 
    <style> 
    #map-canvas, #map_canvas { 
     height: 400px; 
     width: 900px; 
    } 

    @media print { 
     #map-canvas, #map_canvas { 
     height: 400px; 
     width: 900px; 
     } 
    } 

    </style> 
    </head> 
    <body> 
    <?php 
    /* 
    * Smarty plugin 
    * ------------------------------------------------------------- 
    * File:  function.map.php 
    * Type:  map 
    * Name:  Map 
    * Purpose: Accept the keyword & find it on a map. 
    * ------------------------------------------------------------- 
    */ 

    function smarty_function_map($params, &$smarty) 
    { 
     ?> 

     <div id="panel"> 
     <label>Location/Area*</label><input id="searchTextField" type="text" size="50" placeholder="Enter Location/Area"> 
     <input type="text" id="city2" name="city2" /> 
     <input type="text" id="cityLat" name="cityLat" /> 
     <input type="text" id="cityLng" name="cityLng" /> 
     </div> 
     <div id="map-canvas"></div> 

     <?php 

    } 
    ?> 
    </body> 
    </html>

출처

2013-08-01 vickram

사용자가 클릭하여지도에 마커를 추가 할 수 있도록, 당신이 필요합니다 을 듣고을 클릭하면 이벤트 리스너가 설정됩니다. 예 :

사용자가 플롯 한 후에 마커를 끌 수 있습니다. 마커를 드래그 가능으로 설정하면됩니다 (위의 예에서이 작업을 수행함).

google.maps.event.addListener(marker, 'dragend', function(){ 
    //Do something because marker has been dragged somewhere... 
});

마지막으로,지도를 클릭하거나 마커를 드래그 할 때마다, 당신은 결과를 저장해야합니다 : 당신은 또한 문제의 마커에 이벤트 리스너를 부착하여 변경 사항을 청취해야합니다 위도 및 경도 값을 숨겨진 필드에 입력하면 데이터베이스에서 위치를 저장할 수 있습니다.

출처

2013-08-01 11:48:46

웨인 위 티에게 감사드립니다. 저는 이제 새로운 사업을 추가 할 때지도를 얻고 있습니다. 이제 선택한 위치의 위도와 경도를 데이터베이스에 저장하여 해당 비즈니스를 웹 사이트에 표시 할 때 특정 저장된 위치 세부 정보가있는지도를 표시 할 수있게했습니다. 내 질문을 편집하고 시도한 코드를 추가했습니다. 제발 좀 도와주세요. – vickram

방문자가지도에 위치를 추가하는 방법과 데이터베이스에 저장하는 방법

답변

관련 문제