Question

我想基于自动完成输入创建动态Google地图。我把代码编写为： -

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDeAtURNzEX26_mLTUlFXYEWW11ZdlYECM&libraries=places&language=en"></script>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
var map_options = {
  center: {
    lat: 19.0825223, 
    lng: 72.7411155
  },
  zoom: 15,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById('sale_map_canvas'),map_options);

var marker = new google.maps.Marker({
   position:{
     lat: 19.0825223,
     lng: 72.7411155
   },
   map:map,
   draggable:true
});
var city_options = {
   types: ['(cities)'],
   componentRestrictions: {country: "in"}
}
var locality_options = {
   componentRestrictions: {country:"in"}
}
var city = new google.maps.places.Autocomplete(document.getElementById('sale_city'),city_options);
var locality = new google.maps.places.Autocomplete(document.getElementById('sale_locality'),locality_options);
google.maps.event.addListener(city,'place_changed',function(){
var places = city.getPlaces();
var bounds = new google.maps.LatLngBounds();
var i,place;
for (i = 0; place=places[i]; i++) 
{
console.log(place.geometry,location);
bounds.extend(place.geometry.location);
marker.setPosition(place.geometry.location);
}
map.fitBounds(bounds);
map.setZoom(15);
});
google.maps.event.addListener(locality,'place_changed',function(){
var places = locality.getPlaces();
var bounds = new google.maps.LatLngBounds();
var i,place;
for (i = 0; place=places[i]; i++) 
{
 console.log(place.geometry.location);
 bounds.extend(place.geometry.location);
 marker.setPosition(place.geometry.location);
}
map.fitBounds(bounds);
map.setZoom(15);
});
</script>

 <body>
 <input id="sale_city" name="sale_city" type="text" class="validate" autocomplete="on" placeholder="" required>
 <label for="sale_city">City</label>

<input id="sale_locality" name="sale_locality" type="text" class="validate" autocomplete="on" placeholder="" required>
<label for="sale_locality">Locality</label>
<div id="sale_map_canvas"></div>
</body>

地图未显示。请解决它..我已经通过参考https://youtu.be/2n_r0NDekgc

上的视频编写了代码

Answer 1

代码中存在一些问题。

缺少地图div“sale_map_canvas”。
应在页面加载时加载地图。

我已经更改了代码，现在正在加载地图

<style>
#sale_map_canvas {
        height: 100%;
      }
</style>
<script src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">


var map;

function initialize() {

var map_options = {
  center: {
    lat: 19.0825223, 
    lng: 72.7411155
  },
  zoom: 15,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById('sale_map_canvas'),map_options);

var marker = new google.maps.Marker({
   position:{
     lat: 19.0825223,
     lng: 72.7411155
   },
   map:map,
   draggable:true
});
var city_options = {
   types: ['(cities)'],
   componentRestrictions: {country: "in"}
}
var locality_options = {
   componentRestrictions: {country:"in"}
}
var city = new google.maps.places.Autocomplete(document.getElementById('sale_city'),city_options);
var locality = new google.maps.places.Autocomplete(document.getElementById('sale_locality'),locality_options);
google.maps.event.addListener(city,'place_changed',function(){
var place = city.getPlace();
var bounds = new google.maps.LatLngBounds();

console.log(place.geometry,location);
bounds.extend(place.geometry.location);
marker.setPosition(place.geometry.location);

map.fitBounds(bounds);
map.setZoom(15);
});
google.maps.event.addListener(locality,'place_changed',function(){
var place = locality.getPlace();
var bounds = new google.maps.LatLngBounds();

 console.log(place.geometry.location);
 bounds.extend(place.geometry.location);
 marker.setPosition(place.geometry.location);

map.fitBounds(bounds);
map.setZoom(15);
});



};

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


</script>

 <body>
 <input id="sale_city" name="sale_city" type="text" class="validate" autocomplete="on" placeholder="" required>
 <label for="sale_city">City</label>

<input id="sale_locality" name="sale_locality" type="text" class="validate" autocomplete="on" placeholder="" required>
<label for="sale_locality">Locality</label>
<div id="sale_map_canvas"></div>
</body>

基于自动填充输入的动态Google地图

1 个答案: