谷歌地圖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通過搜索框縮放到標記

回答

相關問題