1. 首頁
  2. 問答
  3. 如何顯示谷歌地圖onclick按鈕

如何顯示谷歌地圖onclick按鈕

2017-11-18 157 views
0

在這裏，我使用谷歌地圖API，在頁面加載時間地圖工作正常，但我的要求是當我點擊定位我按鈕時間地圖應顯示我試了很多，但我我不能夠做到，任何一個請更新我code.Morning在病房我努力，但我沒有得到我的回答，我是發展領域的新人 如何顯示谷歌地圖onclick按鈕

function addressinitialize() { 
 
     var input = document.getElementById('searchTextField'); 
 
     var autocomplete = new google.maps.places.Autocomplete(input); 
 
     google.maps.event.addListener(autocomplete, 'place_changed', function() { 
 
      var place = autocomplete.getPlace(); 
 
      
 
      console.log('Place Object',place) 
 
      console.log(place.geometry.location.lat()); 
 
      console.log(place.geometry.location.lng()); 
 

 
      $('#latitude').val(place.geometry.location.lat()); 
 
      $('#longitude').val(place.geometry.location.lng()); 
 
     }); 
 
     } 
 
     google.maps.event.addDomListener(window, 'load', addressinitialize); 
 
function initialize() { 
 
     var input = document.getElementById('searchTextField'); 
 
     var autocomplete = new google.maps.places.Autocomplete(input); 
 
     google.maps.event.addListener(autocomplete, 'place_changed', function() { 
 
      var place = autocomplete.getPlace(); 
 
      
 
      console.log('Place Object',place) 
 
      console.log(place.geometry.location.lat()); 
 
      console.log(place.geometry.location.lng()); 
 

 
      $('#latitude').val(place.geometry.location.lat()); 
 
      $('#longitude').val(place.geometry.location.lng()); 
 
     }); 
 
     } 
 
     google.maps.event.addDomListener(window, 'load', initialize); 
 
      var lat = $('#latitude').val(); 
 
      var lng = $('#longitude').val(); 
 
      var map; 
 
      var marker; 
 
      var myLatlng = new google.maps.LatLng(lat,lng); 
 
      var geocoder = new google.maps.Geocoder(); 
 
      var infowindow = new google.maps.InfoWindow(); 
 

 
      function mapinitialize(){ 
 

 
       var mapOptions = { 
 
        zoom: 18, 
 
        center: myLatlng, 
 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
 
       }; 
 
      
 
       map = new google.maps.Map(document.getElementById("myMap"), mapOptions); 
 
       
 
       marker = new google.maps.Marker({ 
 
        map: map, 
 
        position: myLatlng, 
 
        draggable: true 
 
       });  
 
       
 
       geocoder.geocode({'latLng': myLatlng }, function(results, status) { 
 
        if (status == google.maps.GeocoderStatus.OK) { 
 
         if (results[0]) { 
 
          $('#address').val(results[0].formatted_address); 
 
          $('#latitude').val(marker.getPosition().lat()); 
 
          $('#longitude').val(marker.getPosition().lng()); 
 
          infowindow.setContent(results[0].formatted_address); 
 
          infowindow.open(map, marker); 
 
         } 
 
        } 
 
       }); 
 

 
           
 
       google.maps.event.addListener(marker, 'dragend', function() { 
 

 
       geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) { 
 
        if (status == google.maps.GeocoderStatus.OK) { 
 
         if (results[0]) { 
 
          $('#address').val(results[0].formatted_address); 
 
          $('#latitude').val(marker.getPosition().lat()); 
 
          $('#longitude').val(marker.getPosition().lng()); 
 
          infowindow.setContent(results[0].formatted_address); 
 
          infowindow.open(map, marker); 
 
         } 
 
        } 
 
       }); 
 
      }); 
 
      
 
      } 
 
      
 
      google.maps.event.addDomListener(window, 'load', mapinitialize); 
 

 
      function myFunction() { 
 
       var panPoint = new google.maps.LatLng(document.getElementById("latitude").value, document.getElementById("longitude").value); 
 
       map.panTo(panPoint); 
 
      }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBwuev6Dj8Xvo7fePYs2YJ8KA84xxBCIUo&libraries=places"></script> 
 
<input type="PickupAddress" class="form-control" name="PickupAddress" placeholder="Sublocality" id="searchTextField" autocomplete="on" runat="server" required="" data-msg-required="Please enter Pick up Address" aria-required="true" > &nbsp;&nbsp;&nbsp;&nbsp;<button onclick="myFunction();document.getElementById('map').style.visibility = 'visible'">Locate Me</button> 
 

 
<div class="col-md-8" style="padding-left: 0px;visibility:hidden" id="map"> 
 

 
<label>Locate your Flat-room-mate on the map:</label> 
 
<br><br><br> 
 

 

 
<div id="myMap" style="height:400px;width:100%;"></div> 
 
    <br/> 
 
     <div class="col-md-12" style="padding-left:0px;"> 
 
      ADDRESS: <input id="address" name="address" type="text" style="width:100%;" class="form-control border" /> 
 
      LATITUDE: <input type="text" name="latitude" id="latitude"> <br> 
 
      LONGITUDE: <input type="text" name="longitude" id="longitude"> 
 
     </div> 
 
    <br> 
 
</div>

來源

2017-11-18 Mithun M

+0

您可以創建上的jsfiddle codpen.io或撥弄筆？ – alt255

+0

看到片段@ alt255 – Pedram

回答

0

簡化的解決方案：

$(document).ready(function() { 
 
    var input = document.getElementById('searchTextField'); 
 
    var autocomplete = new google.maps.places.Autocomplete(input); 
 
    google.maps.event.addListener(autocomplete, 'place_changed', function() { 
 
    var place = autocomplete.getPlace(); 
 
    $('#latitude').val(place.geometry.location.lat()); 
 
    $('#longitude').val(place.geometry.location.lng()); 
 
    }); 
 
    createMap(); 
 
}); 
 

 
function createMap() { 
 
    var lat = $('#latitude').val(); 
 
    var lng = $('#longitude').val(); 
 
    var map; 
 
    var marker; 
 
    var myLatlng = new google.maps.LatLng(lat, lng); 
 
    var geocoder = new google.maps.Geocoder(); 
 
    var infowindow = new google.maps.InfoWindow(); 
 

 
    var mapOptions = { 
 
    zoom: 18, 
 
    center: myLatlng, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 

 
    map = new google.maps.Map(document.getElementById("myMap"), mapOptions); 
 

 
    marker = new google.maps.Marker({ 
 
    map: map, 
 
    position: myLatlng, 
 
    draggable: true 
 
    }); 
 

 
    geocoder.geocode({ 
 
    'latLng': myLatlng 
 
    }, function(results, status) { 
 
    if (status == google.maps.GeocoderStatus.OK) { 
 
     if (results[0]) { 
 
     $('#address').val(results[0].formatted_address); 
 
     $('#latitude').val(marker.getPosition().lat()); 
 
     $('#longitude').val(marker.getPosition().lng()); 
 
     infowindow.setContent(results[0].formatted_address); 
 
     infowindow.open(map, marker); 
 
     } 
 
    } 
 
    }); 
 

 

 
    google.maps.event.addListener(marker, 'dragend', function() { 
 

 
    geocoder.geocode({ 
 
     'latLng': marker.getPosition() 
 
    }, function(results, status) { 
 
     if (status == google.maps.GeocoderStatus.OK) { 
 
     if (results[0]) { 
 
      $('#address').val(results[0].formatted_address); 
 
      $('#latitude').val(marker.getPosition().lat()); 
 
      $('#longitude').val(marker.getPosition().lng()); 
 
      infowindow.setContent(results[0].formatted_address); 
 
      infowindow.open(map, marker); 
 
     } 
 
     } 
 
    }); 
 
    }); 
 
}
html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
} 
 

 
.mr10 { 
 
    margin-right: 10px; 
 
} 
 

 
.search-panel { 
 
    direction: ltr; 
 
    overflow: hidden; 
 
    text-align: center; 
 
    position: relative; 
 
    color: rgb(86, 86, 86); 
 
    font-family: Roboto, Arial, sans-serif; 
 
    user-select: none; 
 
    font-size: 11px; 
 
    background-color: rgb(255, 255, 255); 
 
    padding: 8px; 
 
    border-bottom-right-radius: 2px; 
 
    border-top-right-radius: 2px; 
 
    -webkit-background-clip: padding-box; 
 
    background-clip: padding-box; 
 
    box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; 
 
    min-width: 40px; 
 
    border-left: 0px; 
 
} 
 

 
.details-div .col-md-12 { 
 
    text-align: center; 
 
} 
 

 
#panel { 
 
    position: absolute; 
 
    top: 5px; 
 
    right: 1%; 
 
    margin-left: -180px; 
 
    z-index: 5; 
 
    background-color: #ffb052; 
 
    border: 1px solid #999; 
 
    color: #444; 
 
    font-family: Arial; 
 
} 
 

 
.hidden { 
 
    display: none 
 
} 
 

 
.w100 { 
 
    width: 100%; 
 
} 
 

 
.mt10 { 
 
    margin-top: 10px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBwuev6Dj8Xvo7fePYs2YJ8KA84xxBCIUo&libraries=places"></script> 
 

 
<div id="panel"> 
 
    <div class="search-panel"> 
 
    <input type="PickupAddress" class="form-control mr10" name="PickupAddress" placeholder="Sublocality" id="searchTextField" autocomplete="on" runat="server" required="" data-msg-required="Please enter Pick up Address" aria-required="true"><button onclick="createMap();$('.details-div').removeClass('hidden')">Locate Me</button> 
 
    <div class="details-div mt10 hidden"> 
 
     <div class="col-md-12"> 
 
     <div> ADDRESS: <input id="address" name="address" type="text" class="form-control border" /></div> 
 
     <div class="mt10"> LATITUDE: <input type="text" name="latitude" id="latitude"></div> 
 
     <div class="mt10"> LONGITUDE: <input type="text" name="longitude" id="longitude"></div> 
 
     </div> 
 
     <br> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div id="myMap" style="height:100%;width:100%;"></div>

來源

2017-11-18 12:42:05

0

做visibility:hidden上map然後visible它在button點擊：

function addressinitialize() { 
 
     var input = document.getElementById('searchTextField'); 
 
     var autocomplete = new google.maps.places.Autocomplete(input); 
 
     google.maps.event.addListener(autocomplete, 'place_changed', function() { 
 
      var place = autocomplete.getPlace(); 
 
      
 
      console.log('Place Object',place) 
 
      console.log(place.geometry.location.lat()); 
 
      console.log(place.geometry.location.lng()); 
 

 
      $('#latitude').val(place.geometry.location.lat()); 
 
      $('#longitude').val(place.geometry.location.lng()); 
 
     }); 
 
     } 
 
google.maps.event.addDomListener(window, 'load', addressinitialize); 
 
function displayMap() { 
 
    document.getElementById('myMap').style.display = "block"; 
 
    initialize(); 
 
    mapinitialize(); 
 
    var panPoint = new google.maps.LatLng(document.getElementById("latitude").value, document.getElementById("longitude").value); 
 
    map.panTo(panPoint); 
 
} 
 

 
function initialize() { 
 
    var input = document.getElementById('searchTextField'); 
 
    var autocomplete = new google.maps.places.Autocomplete(input); 
 
    google.maps.event.addListener(autocomplete, 'place_changed', function() { 
 
    var place = autocomplete.getPlace(); 
 

 
    console.log('Place Object', place) 
 
    console.log(place.geometry.location.lat()); 
 
    console.log(place.geometry.location.lng()); 
 

 
    $('#latitude').val(place.geometry.location.lat()); 
 
    $('#longitude').val(place.geometry.location.lng()); 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize); 
 

 
var lat = "12.9536392"; 
 
var lng = "77.69512600000007"; 
 
var map; 
 
var marker; 
 
var myLatlng = new google.maps.LatLng(lat, lng); 
 
var geocoder = new google.maps.Geocoder(); 
 
var infowindow = new google.maps.InfoWindow(); 
 

 
function mapinitialize() { 
 

 
    var mapOptions = { 
 
    zoom: 18, 
 
    center: myLatlng, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 

 
    map = new google.maps.Map(document.getElementById("myMap"), mapOptions); 
 

 
    marker = new google.maps.Marker({ 
 
    map: map, 
 
    position: myLatlng, 
 
    draggable: true 
 
    }); 
 

 
    geocoder.geocode({ 
 
    'latLng': myLatlng 
 
    }, function(results, status) { 
 
    if (status == google.maps.GeocoderStatus.OK) { 
 
     if (results[0]) { 
 
     $('#address').val(results[0].formatted_address); 
 
     $('#latitude').val(marker.getPosition().lat()); 
 
     $('#longitude').val(marker.getPosition().lng()); 
 
     infowindow.setContent(results[0].formatted_address); 
 
     infowindow.open(map, marker); 
 
     } 
 
    } 
 
    }); 
 

 

 
    google.maps.event.addListener(marker, 'dragend', function() { 
 

 
    geocoder.geocode({ 
 
     'latLng': marker.getPosition() 
 
    }, function(results, status) { 
 
     if (status == google.maps.GeocoderStatus.OK) { 
 
     if (results[0]) { 
 
      $('#address').val(results[0].formatted_address); 
 
      $('#latitude').val(marker.getPosition().lat()); 
 
      $('#longitude').val(marker.getPosition().lng()); 
 
      infowindow.setContent(results[0].formatted_address); 
 
      infowindow.open(map, marker); 
 
     } 
 
     } 
 
    }); 
 
    }); 
 

 
}
#myMap { 
 
    display: none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBwuev6Dj8Xvo7fePYs2YJ8KA84xxBCIUo&libraries=places"></script> 
 

 
<input type="PickupAddress" class="form-control" name="PickupAddress" placeholder="Sublocality" id="searchTextField" autocomplete="on" runat="server" required="" data-msg-required="Please enter Pick up Address" aria-required="true"> &nbsp;&nbsp;&nbsp;&nbsp; 
 
<button onclick="displayMap();">Locate Me</button> 
 

 
<div class="col-md-8" style="padding-left: 0px;" id="map"> 
 

 
    <label>Locate your Flat-room-mate on the map:</label> 
 
    <br><br><br> 
 

 

 
    <div id="myMap" style="height:400px;width:100%;"></div> 
 
    <br/> 
 
    <div class="col-md-12" style="padding-left:0px;"> 
 
    ADDRESS: <input id="address" name="address" type="text" style="width:100%;" class="form-control border" /> LATITUDE: <input type="text" name="latitude" id="latitude"> <br> LONGITUDE: <input type="text" name="longitude" id="longitude"> 
 
    </div> 
 
    <br> 
 
</div>

來源

2017-11-18 10:52:30 Pedram

+0

它工作正常，但空間不應該顯示正確如何隱藏空間後點擊我，向下滾動意味着空的空間即將到來 –

+0

谷歌地圖'有點不與'display：none'工作，但與「知名度」但「知名度」實際上並不隱藏元素。但有一些技巧我們可以做，它會更新這個答案。 – Pedram

+0

@ pedram，我的主要功能是不工作，現在我給靜態的經度和緯度，而不是我想要使動態，這意味着我們必須searchTextField搜索Sublocality，之後，我想要使用此經緯度和通行證初始化函數，請再次檢查我的代碼段 –

相關問題

 相關問題