Question

我有一个谷歌搜索和显示标记的示例。我试图谷歌显示标记的地图，然后搜索栏，用户输入城市或拉链，并用标记显示该区域长。我跟着，Store Locator in google maps, input zip code and display markers on map and sidebar

一切都很好，但是当地图第一次加载时，它不会显示任何标记。只有当你搜索。我一直都需要这些标记。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml">    
<head>     
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />     
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>     

<title>Store Locate</title>     
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=false&libraries=places&key=AIzaSyDOorkShHO1xhw2zbjz-OZdSKP-xQ65AS0"></script>     

<style>    
  #pac-input {    
    background-color: #fff;    
    font-family: Roboto;    
    font-size: 15px;    
    font-weight: 300;    
    margin-left: 12px;    
    padding: 0 11px 0 13px;    
    text-overflow: ellipsis;    
    width: 400px;    
  }    

  #pac-input:focus {    
    border-color: #4d90fe;    
  }    

  .pac-container {    
    font-family: Roboto;    
  }    

  #type-selector {    
    color: #fff;    
    background-color: #4d90fe;    
    padding: 5px 11px 0px 11px;    
  }    

  #type-selector label {    
    font-family: Roboto;    
    font-size: 13px;    
    font-weight: 300;    
  }    
</style>    
<script type="text/javascript">     

  var side_bar_html = "";    
  // arrays to hold copies of the markers and html used by the side_bar     
  var gmarkers = [];     
  var marker;    
  var map = null;    
  var t=1;    

function initialize() {    
// create the map    
var myOptions = {    

center: new google.maps.LatLng(35.467560, -97.516428),    
zoom:6,    
    disableDefaultUI: true,      

mapTypeId: google.maps.MapTypeId.ROADMAP     
}    

map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);    

google.maps.event.addListener(map, 'click', function() {    
    infowindow.close();    
    });    


 initSearchBox(map, 'pac-input');    
}//----------------INIT END--------------------    


 var infowindow = new google.maps.InfoWindow(    
 {     
 size: new google.maps.Size(150,50)    
 });     

 // This function picks up the click and opens the corresponding info window    
function myclick(i) {    
google.maps.event.trigger(gmarkers[i], "click");    

}    

function initSearchBox(map, controlId) {    
// Create the search box and link it to the UI element.    
var input = (document.getElementById(controlId));    
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);    
var searchBox = new google.maps.places.SearchBox(input);    

// [START region_getplaces]    
// 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;    
    }    

    //get first place    
    var place = places[0];    


    var infowindow = new google.maps.InfoWindow(    
 {     
  size: new google.maps.Size(150,50),    
  content : place.info    
 });     

// Add markers to the map    
// Set up the markers with info windows     
// add the points     

var point = new google.maps.LatLng(35.979088,-96.112985);    
var marker = createMarker(point,"Firestone, Oklahoma City<br>211 411 2311")    
var point = new google.maps.LatLng(38.0409333,23.7954601);    
var marker = createMarker(point,"Nespresso S.A.","<b>Nespresso S.A.</b><br>Agiou Thoma 27,15124,Marousi")    
var point = new google.maps.LatLng(38.0473031,23.8053483);    
var marker = createMarker(point,"Regency Entertainment","<b>Regency Entertainment</b><br>Agiou Konstantinou 49,15124,Marousi <br>210 614 9800")    
var point = new google.maps.LatLng(38.050986,23.8084322);    
var marker = createMarker(point,"Just4U","<b>Just4U</b> <br>Dimitriou Gounari 84, 15124, Marousi<br>210 614 1923")    
var point = new google.maps.LatLng(38.0400533,23.8011982);    
var marker = createMarker(point,"Ekka Cars S.A.","<b>Ekka</b> <br>Leoforos Kifisias 79,15124,Marousi<br>210 349 8000")    

// put the assembled side_bar_html contents into the side_bar div    
document.getElementById("side_bar").innerHTML = side_bar_html;    
t -=1;//This is so if you search again, it doesn't display again in sidebar    


    map.fitBounds(place.geometry.viewport);    
});    
}    

// A function to create the marker and set up the event window function     
function createMarker(latlng, name, html) {    
var contentString = html;    
var marker = new google.maps.Marker({    
    position: latlng,    
    map: map,    
    //zIndex: Math.round(latlng.lat()*-100000)<<5    
    });    

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

 // save the info we need to use later for the side_bar    
 gmarkers.push(marker);    
 // add a line to the side_bar html    
 side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';    
}    
google.maps.event.addDomListener(window, 'load', initialize);    
</script>     
</head>     
<body style="margin:0px; padding:0px;" >     
<input id="pac-input" class="controls" type="text" placeholder="City, State or Zip Code">    

  <div id="map_canvas" style="width: 550px; height: 450px"></div>     

 </body>     
 </html>

Answer 1

那是因为您要在lag()事件中添加标记。只需将标记创建代码移到places_changed函数中。

initialize

每次更新您的观点和标记时，您也不需要var point = new google.maps.LatLng(35.979088,-96.112985); var marker = createMarker(point,"Firestone, Oklahoma City 211 411 2311"); var point = new google.maps.LatLng(38.0409333,23.7954601); var marker = createMarker(point,"Nespresso S.A.","Nespresso S.A. Agiou Thoma 27,15124,Marousi"); var point = new google.maps.LatLng(38.0473031,23.8053483); var marker = createMarker(point,"Regency Entertainment","Regency Entertainment Agiou Konstantinou 49,15124,Marousi 210 614 9800"); var point = new google.maps.LatLng(38.050986,23.8084322); var marker = createMarker(point,"Just4U","Just4U Dimitriou Gounari 84, 15124, Marousi 210 614 1923"); var point = new google.maps.LatLng(38.0400533,23.8011982); var marker = createMarker(point,"Ekka Cars S.A.","Ekka Leoforos Kifisias 79,15124,Marousi 210 349 8000");。

var

所以你的var point = new google.maps.LatLng(35.979088,-96.112985); var marker = createMarker(point,"Firestone, Oklahoma City 211 411 2311"); point = new google.maps.LatLng(38.0409333,23.7954601); marker = createMarker(point,"Nespresso S.A.","Nespresso S.A. Agiou Thoma 27,15124,Marousi"); point = new google.maps.LatLng(38.0473031,23.8053483); marker = createMarker(point,"Regency Entertainment","Regency Entertainment Agiou Konstantinou 49,15124,Marousi 210 614 9800"); point = new google.maps.LatLng(38.050986,23.8084322); marker = createMarker(point,"Just4U","Just4U Dimitriou Gounari 84, 15124, Marousi 210 614 1923"); point = new google.maps.LatLng(38.0400533,23.8011982); marker = createMarker(point,"Ekka Cars S.A.","Ekka Leoforos Kifisias 79,15124,Marousi 210 349 8000");函数看起来像这样：

initialize

演示

https://jsfiddle.net/ChinLeung/x75wkpd0/4/

Google映射商店定位器和搜索

1 个答案:

演示