Fatal编程技术网
  • javascript/
  • Javascript can'；不要让谷歌地图搜索框工作

Javascript can'；不要让谷歌地图搜索框工作

javascript google-maps

Javascript can'；不要让谷歌地图搜索框工作,javascript,google-maps,Javascript,Google Maps,我试了又试，但我无法使搜索框工作。 不明白错误在哪里 我正在用谷歌API开发我自己的地图，我想添加一个谷歌地图搜索框，但即使仔细阅读谷歌地图API，也找不到成功的方法 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" conten

我试了又试，但我无法使搜索框工作。 不明白错误在哪里

我正在用谷歌API开发我自己的地图，我想添加一个谷歌地图搜索框，但即使仔细阅读谷歌地图API，也找不到成功的方法

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>PHP/MySQL & Google Maps Example</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

<script type="text/javascript">
//<![CDATA[

var customIcons = {
  1: {
    icon: 'images/pin_green.png',
  },
  0: {
    icon: 'images/pin_red.png',
  }
};

function load() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(38.72529919849261, -9.150065436059549),
    zoom: 13,
    mapTypeId: 'roadmap'
  });
  var infoWindow = new google.maps.InfoWindow;

  // Change this depending on the name of your PHP file
  downloadUrl("map_process.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var timeStamp = markers[i].getAttribute("timeStamp");
      var rate = markers[i].getAttribute("rate");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
      var html = '<p>'+ timeStamp + '</p>';
      var icon = customIcons[rate] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon
      });
      bindInfoWindow(marker, map, infoWindow, html);
    }
  });

// Create the search box and link it to the UI element.
var input = /** @type {HTMLInputElement} */ (
document.getElementById('pac-input'));
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

var searchBox = new google.maps.places.SearchBox(
/** @type {HTMLInputElement} */
(input));

// Listen for the event fired when the user selects an item from the
// pick list. Retrieve the matching places for that item.
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();

for (var i = 0, marker; marker = markers[i]; i++) {
  marker.setMap(null);
}

// For each place, get the icon, place name, and location.
markers = [];
var bounds = new google.maps.LatLngBounds();
var place = null;
var viewport = null;
for (var i = 0; place = places[i]; i++) {
  var image = {
    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(25, 25)
  };

  // Create a marker for each place.
  var marker = new google.maps.Marker({
    map: map,
    icon: image,
    title: place.name,
    position: place.geometry.location
  });
  viewport = place.geometry.viewport;
  markers.push(marker);

  bounds.extend(place.geometry.location);
}
map.setCenter(bounds.getCenter());
});

// Bias the SearchBox results towards places that are within the bounds of the
// current map's viewport.
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
searchBox.setBounds(bounds);
});

}


function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
}

function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}

function doNothing() {}

//]]>

</script>

</head>
<body onload="load()">
  <input id="pac-input"></input>
<div id="map" style="width: 100%; height: 600px"></div>
</body>

</html>


PHP/MySQL和googlemaps示例
// 问题（如RamRaider所述）在于没有定义标记数组。在全局上下文中定义它，SearchBox就会工作



代码片段：



var自定义图标={
1: {
图标：“images/pin_green.png”，
},
0: {
图标：“images/pin_red.png”，
}
};
var标记=[]；
函数加载（）{
var map=new google.maps.map（document.getElementById（“map”）{
中心：新google.maps.LatLng（38.72529919849261，-9.150065436059549），
缩放：13，
mapTypeId:“路线图”
});
var infoWindow=new google.maps.infoWindow；
//根据PHP文件的名称更改此选项
下载URL（“map_process.php”，函数（数据）{
var xml=data.responseXML；
var markers=xml.documentElement.getElementsByTagName（“标记”）；
对于（var i=0；i'；
var icon=customIcons[rate]| |{}；
var marker=new google.maps.marker({
地图：地图，
位置:点,，
图标：icon.icon
});
bindInfoWindow（标记、地图、infoWindow、html）；
}
});
//创建搜索框并将其链接到UI元素。
变量输入=/**@type{HTMLInputElement}*/(
document.getElementById（'pac-input'）；
map.controls[google.maps.ControlPosition.TOP_LEFT].push（输入）；
var searchBox=new google.maps.places.searchBox(
/**@type{HTMLInputElement}*/
（输入）；
//侦听当用户从中选择项目时激发的事件
//选择列表。检索该项目的匹配位置。
google.maps.event.addListener（搜索框，'places_changed'，函数（）{
var places=searchBox.getPlaces（）；
for（var i=0，marker；marker=markers[i]；i++）{
marker.setMap（空）；
}
//对于每个位置，获取图标、地名和位置。
标记=[]；
var bounds=new google.maps.LatLngBounds（）；
var-place=null；
var=null；
for（var i=0；place=places[i]；i++）{
变量图像={
url:place.icon，
大小：新谷歌地图大小（71,71），
来源：新google.maps.Point（0,0），
主播：新google.maps.Point（17,34），
scaledSize:new google.maps.Size（25,25）
};
//为每个地方创建一个标记。
var marker=new google.maps.marker({
地图：地图，
图标：图像，
标题：place.name，
位置：place.geometry.location
});
viewport=place.geometry.viewport；
标记器。推（标记器）；
扩展（place.geometry.location）；
}
map.setCenter（bounds.getCenter（））；
});
//将搜索框结果偏向在搜索范围内的位置
//当前地图的视口。
google.maps.event.addListener（映射'bounds_changed'，函数（）{
var bounds=map.getBounds（）；
searchBox.setBounds（边界）；
});
}
函数bindInfoWindow（标记、地图、infoWindow、html）{
google.maps.event.addListener（标记'click'，函数（）{
setContent（html）；
信息窗口。打开（地图、标记）；
});
}
函数下载url（url，回调）{
var请求=window.ActiveXObject？
新的ActiveXObject（'Microsoft.XMLHTTP'）：
新的XMLHttpRequest；
request.onreadystatechange=函数（）{
if（request.readyState==4）{
request.onreadystatechange=doNothing；
回调（请求、请求、状态）；
}
};
打开（'GET'，url，true）；
请求发送（空）；
}
函数doNothing（）{}
google.maps.event.addDomListener（窗口“加载”，加载）

html，
身体，
#地图画布{
身高：100%；
宽度：100%；
边际：0px；
填充：0px
}


对于我的测试，我发现通过添加
var标记=[]函数main（）之前，
解决了我在控制台中看到的许多错误


<script type="text/javascript">
//<![CDATA[
var markers=[];
..... etc with your code as before




//
然后，在回调中，您可能可以从
var markers=xml.documentElement.getElementsByTagName（“marker”）中删除
var


我不是说这是问题的最终解决方案，这更像是一个观察和修复~但它确实意味着，当我键入一个位置时，地图会更改并显示该位置，而不需要ajax/db查找。
问题/问题到底是什么？您也标记为php，但没有任何代码支持该问题。祝您调试顺利。顺便说一句，您缺少开始的html标记。在控制台中读取错误too@RamRaider搜索框触发地点，但地图无法到达所需地点。如果我放了一个地址，地图就不会移动。@RamRaider“声明var markers=[]；与其他代码一起作为全局代码”-您能更好地解释一下吗？呃，我想是我建议在全局范围内定义变量的”-@RamRaider，对不起，修复了属性。：）没问题@geocodezip-结局很好@如果解决了你的问题，请考虑接受答案。下面是如何返回此处并对勾号/复选标记执行相同操作，直到其变为绿色。这会通知社区，找到了解决方案。否则，其他人可能会认为问题仍然悬而未决，并可能希望发布（更多）答案。欢迎来到Stack。