谷歌地图api v3通过搜索框缩放到标记

首先，我想为我的糟糕英语道歉。我是新来的谷歌地图API，现在正在开发一个地图来显示标记从MySQL数据。绘图标记部分全部通过阅读这篇文章https://developers.google.com/maps/articles/phpsqlajax_v3完成。现在我想要做的就是添加一个搜索框，它将放大到已经在地图上显示的某个标记。我想知道什么是最简单的方法来做到这一点，示例代码或教程将是非常有用的事情，因为我真的是一个新手。提前致谢！这是我的代码到目前为止。谷歌地图api v3通过搜索框缩放到标记

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <title>SI-Fas</title> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<meta charset="utf-8"> 
    <style type="text/css"> 
    html { height: 100% } 
    body { height: 100%; margin: 0; padding: 0 } 
    #map_canvas { height: 100% } 
    </style> 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDOs3oCQK1heWU99CFxtpIAPEqHD0F7X7Q&libraries=places&callback=initAutocomplete" 
      type="text/javascript"></script> 
    <script type="text/javascript"> 
    //<![CDATA[ 
    var customIcons = { 
     PUSKESMAS: { 
     icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png', 
     shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
     }, 
     KLINIK: { 
     icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png', 
     shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
     }, 
     DORUM: { 
     icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png', 
     shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
     }, 
     DORGI: { 
     icon: 'http://labs.google.com/ridefinder/images/mm_20_yellow.png', 
     shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
     }, 
     RS: { 
     icon: 'http://labs.google.com/ridefinder/images/mm_20_white.png', 
     shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png' 
     } 
    }; 
    function load() { 
     var map = new google.maps.Map(document.getElementById("map_canvas"), { 
     center: new google.maps.LatLng(-7.789915, 110.374010), 
     zoom: 13, 
     mapTypeId: 'roadmap' 
     }); 

     var infoWindow = new google.maps.InfoWindow; 
     // Change this depending on the name of your PHP file 
     downloadUrl("phpsqlajax_genxml3.php", function(data) { 
     var xml = data.responseXML; 
     var markers = xml.documentElement.getElementsByTagName("marker"); 
     for (var i = 0; i < markers.length; i++) { 
      var place = markers[i].getAttribute("place"); 
      var description = markers[i].getAttribute("description"); 
      var type = markers[i].getAttribute("type"); 
      var point = new google.maps.LatLng(
       parseFloat(markers[i].getAttribute("lat")), 
       parseFloat(markers[i].getAttribute("lng"))); 
      var html = "<b>" + place + "</b> <br/>" + description; 
      var icon = customIcons[type] || {}; 
      var marker = new google.maps.Marker({ 
      map: map, 
      position: point, 
      icon: icon.icon, 
      shadow: icon.shadow 
      }); 
      bindInfoWindow(marker, map, infoWindow, html); 
     } 
     }); 
     var bantulLayer = new google.maps.KmlLayer({ 
      url: 'http://www.bpjskesjogja.com/giskml/bantul11.kml', 
      map: map 
     }); 
     var kotaLayer = new google.maps.KmlLayer({ 
      url: 'http://www.bpjskesjogja.com/giskml/kota11.kml', 
      map: map 
     }); 
     var slemanLayer = new google.maps.KmlLayer({ 
      url: 'http://www.bpjskesjogja.com/giskml/sleman11.kml', 
      map: map 
     }); 
     var kulproLayer = new google.maps.KmlLayer({ 
      url: 'http://www.bpjskesjogja.com/giskml/kulpro11.kml', 
      map: map 
     }); 
     var gunkidLayer = new google.maps.KmlLayer({ 
      url: 'http://www.bpjskesjogja.com/giskml/gunkid15.kml', 
      map: map 
     }); 

    } 
    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()"> 
    <!-- <div id="map" style="width: 900px; height: 630px"></div> --> 

    </body> 
</html> 
<table> 
<tr> 
    <td> 
     <div id="map_canvas" style="width: 1150px; height: 620px"> 
     </div> 
    </td> 
    <td style="vertical-align:top; font-family: Arial, Helvetica, sans-serif; font-size: 12px;"> 
     <u style="font-size: 15px; font-weight: bold; font-family: Arial, Helvetica, sans-serif">Legenda:</u><br/><br/> 
     <img alt="" src="http://labs.google.com/ridefinder/images/mm_20_red.png" style="height: 16px; width: 12px" /> 
     PUSKESMAS<br /> 
     <img alt="" src="http://labs.google.com/ridefinder/images/mm_20_blue.png" style="height: 16px; width: 12px" /> 
     KLINIK<br /> 
     <img alt="" src="http://labs.google.com/ridefinder/images/mm_20_green.png" style="height: 16px; width: 12px" /> 
     DOKTER UMUM<br /> 
     <img alt="" src="http://labs.google.com/ridefinder/images/mm_20_yellow.png" style="height: 16px; width: 12px" /> 
     DOKTER GIGI<br /> 
     <img alt="" src="http://labs.google.com/ridefinder/images/mm_20_white.png" style="height: 16px; width: 12px" /> 
     RUMAH SAKIT<br /> 
     <br /> 
    </td> 
</tr> 
</table>

来源

2016-02-07 alfian nur

要查找我们需要让所有的标记在JavaScript数组的标志。我们可以将标记的名称属性设置为它所对应的位置（假设您想通过地名搜索标记）。然后，对于每个搜索文本，我们可以遍历这个标记数组并根据其名称在集合中搜索所需的标记。

找到特定标记后，我们可以将该标记设置为地图中心，并可选择缩放地图（如您指定的那样）。

Check this out

注：只为你来验证，我有一个名为场所作为地方1，将2等

来源

2016-02-09 04:08:11

很好的例子爵士。但正如您从我的代码中可以看到的，我使用xml中的数据来填充我的latlng。现在我正在尝试使用您的代码作为搜索功能。我通过定义var gmarkers = []; globaly和使用gmarkers.push（标记）;但搜索功能仍然不起作用。任何想法？ –

现在一切都很好。很多人非常感谢你@Bharat Gupta。发生此错误的原因是我尚未定义var map全局变量 –

这是我在SO上提供的第一个解决方案...或者任何平台：P。很高兴，这对你有一些目的。乐于帮助：） –

谷歌地图api v3通过搜索框缩放到标记

回答

相关问题