问题：

基于自动完成输入的动态Google地图

符国安

2023-03-14

我想创建基于自动完成输入的动态谷歌地图。我把代码写成：-

<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上的视频编写了代码

共有1个答案

卫才哲

2023-03-14

代码中的问题很少。

缺少映射分区“sale_map_canvas”。
应在页面加载时加载映射。

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

<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>

类似资料：

自动完成动态创建的输入

第一个帖子！和一个java的noob*随便！我知道有很多关于这个话题的帖子，我已经读过了…我就是解决不了。我有一个非常简单的HTML表单，有静态输入和动态创建的输入。 HTML自动完成 HTML表单 null AddInput.js 所以问题很简单…给定这些代码，我如何在每个新生成的输入中实现自动完成。事先多谢。
基于XSD的记事本XML自动完成

我知道XML Tools将针对XSD文件验证XML文档，并且运行良好，但它（或任何其他插件）是否能够提供基于XSD文件的XML标签的标签自动完成（例如，我提供允许的标签或建议允许的属性）？例如，Eclipse编辑器很好地完成了这个标签的自动完成。
放置Google Api-自动完成

这有点奇怪，我遵循Google places API为我的android应用程序添加了自动完成功能。谷歌为Android自动完成放置API请求拒绝，即使使用正确的API键。我甚至尝试与JSON客户机进行检查，并请求GET/POST仍然是相同的错误，因为我确信我的代码遵循了相应的google api自动完成集成。我还没有找到解决错误的任何解决方案。一些答案建议删除带有place_id的传感器。我不知
Google Academy Android Google Maps自动完成示例

导入给了我一个错误“类型Android.widget.Filter.FilterResults不可见”，但是在后面的代码中，我得到了一些不同的错误，比如（1）Filter“返回类型与ArrayAdapter.getFilter（）不兼容”。有什么想法吗？？？
谷歌地图API自动完成：仅输出城市

有没有办法只显示谷歌地图api自动完成字段中的城市？目前，我们正在使用地理代码，但不幸的是，我们甚至收到了国家和地址。我们甚至尝试了以下代码自动完成=新谷歌。地图。地方。自动完成（输入、选项）；我们收到的错误是未捕获的TypeError:无法读取未定义的属性“Autocomplete” --谢谢你
将自动完成添加到搜索输入

我有搜索输入以及下拉存储为li元素。如何向搜索标签添加自动完成功能，从li标签获取数据，并在搜索输入中显示相应的结果。自动完成程序应从ul li标签中提取内容并执行操作。可以通过li搜索输入标签完成吗？

基于自动完成输入的动态Google地图

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档