在Google地图上显示多个标记。

Question

我使用以下JavaScript代码在我的ASP.Net网站上显示Google地图。通过此代码，我添加了Google地方信息搜索功能，可根据用户输入的内容来建议结果/地点我正在根据搜索到的位置显示属性。不过，我也想显示搜索属性的标记。我在这里找到了一个解决方案：http://www.dotnetbull.com/2013/06/multiple-marker-with-labels-in-google.html但考虑到我对JavaScript的知识有限，我无法将其与现有代码集成，以便在Google地图上显示地点搜索和标记。如果你能帮助我让它工作，我会很感激。

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script> 
 
<script type="text/javascript"> 
 
    function LoadGoogleMAP() { 
 

 
     //Gets value of latitude and longitude of the search location from txtLatitude and txtLongitude textboxes. 
 
     var lat = document.getElementById('<%=txtLatitude.ClientID%>').value; 
 
     var lon = document.getElementById('<%=txtLongitude.ClientID%>').value; 
 
     var myLatlng = new google.maps.LatLng(lat, lon) 
 

 
     var markers = []; 
 
     var mapOptions = { 
 
       center: myLatlng, 
 
       zoom: 14, 
 
       mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
       marker: true 
 
     }; 
 

 
     var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
 

 
     // Create the search box and link it to the UI element. 
 
     var input = (document.getElementById('MainContent_txtSearch')); 
 
     map.controls[google.maps.ControlPosition.CENTER].push(input); 
 

 
     var searchBox = new google.maps.places.SearchBox((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(); 
 

 
      if (places.length == 0) { 
 
       return; 
 
      } 
 

 
      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(); 
 
      for (var i = 0, place; 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 
 
       }); 
 

 
       markers.push(marker); 
 

 
       bounds.extend(place.geometry.location); 
 
      } 
 

 
      map.fitBounds(bounds); 
 
      map.setZoom(15); 
 
      
 
     }); 
 
     
 
     // current map's viewport. 
 
     google.maps.event.addListener(map, 'bounds_changed', function() { 
 
      var bounds = map.getBounds(); 
 
      searchBox.setBounds(bounds); 
 
     }); 
 
    } 
 
</script>

Answer 1

尝试从Official Google Doc这个代码：

function initialize() { 

    var markers = []; 
    var map = new google.maps.Map(document.getElementById('map-canvas'), { 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var defaultBounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(-33.8902, 151.1759), 
     new google.maps.LatLng(-33.8474, 151.2631)); 
    map.fitBounds(defaultBounds); 

    // 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(); 

    if (places.length == 0) { 
     return; 
    } 
    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(); 
    for (var i = 0, place; 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 
     }); 

     markers.push(marker); 

     bounds.extend(place.geometry.location); 
    } 

    map.fitBounds(bounds); 
    }); 

    // 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); 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize);