Question

首先，我想为我糟糕的英语道歉。我是google map api的新手，现在正在开发一个地图来显示来自mysql数据的标记。绘图标记部分都是通过阅读本文https://developers.google.com/maps/articles/phpsqlajax_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>

Answer 1

要搜索标记，我们需要将所有标记保存在javascript数组中。我们可以将标记的name属性设置为它对应的位置（假设您要按地名搜索标记）。然后，对于每个搜索文本，我们可以遍历此标记数组，并根据其名称在集合中搜索所需的标记。

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

Check this out

注意：仅供您验证，我已将地点命名为地点1，地点2等

google maps api v3 zoom to searchbox

1 个答案: