Google Map API：通过infowindow中的文本搜索可能吗？

Question

我目前正在研究一个应用程序，其中根据用户的帖子将各种标记放置在Google Map上的infowindows中。我还包含地理编码，以便用户可以更改其位置并在任何区域查看标记/帖子。

我想要做的是让用户通过表单搜索infowindows中的文本信息，然后地图通过显示包含该文本窗口的标记进行响应。我已经通过API进行了搜索，但我没有看到提及的这种能力，尽管看起来应该是可以实现的。

任何有关如何做到这一点的见解或信息将不胜感激。

这里的应用程序中的当前代码：

function mainGeo() 
{ 
    if (navigator.geolocation) 
     { 
      navigator.geolocation.getCurrentPosition(mainMap, error, {maximumAge: 30000, timeout: 10000, enableHighAccuracy: true}); 
    } 
    else 
    { 
      alert("Sorry, but it looks like your browser does not support geolocation."); 
    } 
} 


var stories = {{storyJson|safe}}; 
var geocoder; 
var map; 


function loadMarkers(stories){ 
    for (i=0;i<stories.length;i++) { 
     var story = stories[i]; 

     (function(story) { 
      var pinColor = "69f2ff"; 
       var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=S|" + pinColor, 
        new google.maps.Size(21, 34), 
        new google.maps.Point(0,0), 
        new google.maps.Point(10, 34)); 
      var point = new google.maps.LatLng(story.latitude, story.longitude); 
      var marker = new google.maps.Marker({position: point, map: map, icon: pinImage}); 
      var infowindow = new google.maps.InfoWindow({ 
      content: '<div >'+ 
       '<div >'+ 
       '</div>'+ 
       '<h2 class="firstHeading">'+story.headline+'</h2>'+ 
       '<div>'+ 
       '<p>'+story.author+'</p>'+ 
       '<p>'+story.city+'</p>'+ 
       '<p>'+story.topic+'</p>'+ 
       '<p>'+story.date+'</p>'+ 
       '<p>'+story.copy+'</p>'+ 
       '<p><a href='+story.url+'>Click to read story</a></p>'+ 
       '</div>'+ 
       '</div>' 

      }); 
      google.maps.event.addListener(marker, 'click', function() { 
      infowindow.open(map,this); 
      }); 
     })(story); 
    } 
} 



function mainMap(position) 
{ 
     geocoder = new google.maps.Geocoder(); 
     // Define the coordinates as a Google Maps LatLng Object 
     var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 


     // Prepare the map options 
     var mapOptions = 
     { 
        zoom: 15, 
        center: coords, 
        mapTypeControl: false, 
        navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     // Create the map, and place it in the map_canvas div 
     map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 

     // Place the initial marker 
     var marker = new google.maps.Marker({ 
        position: coords, 
        map: map, 
        title: "Your current location!" 
     }); 

     loadMarkers(stories); 

    } 


    function codeAddress() { 
    var address = document.getElementById("address").value; 
    geocoder.geocode({ 'address': address}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
     map.setCenter(results[0].geometry.location); 
     var marker = new google.maps.Marker({ 
      map: map, 
      position: results[0].geometry.location 
     }); 
     } else { 
     alert("Geocode was not successful for the following reason: " + status); 
     } 
    }); 
    } 


function error() { 
    alert("You have refused to display your location. You will not be able to submit stories."); 
    } 

mainGeo(); 

Answer 1

1. 创建三个空的阵列（例如，markers，infowindows，和matches）
2. 作为实例化标记，通过索引引用标记在markers数组（例如，​​）
3. 当您实例化infowindow时，通过infowindows数组中的索引引用它的内容（例如，infowindows[i] = htmltext [或您存储内容的任何变量名称]
4. 搜索infowindows数组中的字符串，将包含该字符串的项的索引存储在matches数组中，然后使用for循环matches数组来添加markers数组中的标记（基于matches数组的索引值）。