个人中心
gpt4 book ai didi

javascript - Google map 商店定位器和搜索

转载 作者：行者123 更新时间：2023-12-03 02:31:40 25 4
gpt4 key购买 nike

我有一个谷歌搜索和显示标记的示例。我试图让谷歌显示标记 map ，然后显示一个搜索栏，供用户输入城市或邮政编码并显示带有标记的该区域。我关注了，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>

最佳答案

这是因为您要在 places_changed 事件上添加标记。只需将标记创建代码移至 initialize 函数中即可。

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");

您也不需要每次都执行 var 来更新您的点和标记。

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

所以你的initialize函数看起来像这样:

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

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

    initSearchBox(map, 'pac-input'); 

}

演示

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

关于javascript - Google map 商店定位器和搜索，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48710364/

25 4 0
文章推荐： javascript - ReactJS - 为什么我的输入栏的样式没有根据 setState 改变？
文章推荐： javascript - 计算圆弧楔形的中心点
文章推荐： javascript - Node 8 : converting a promise/callback structure to async/await
文章推荐： javascript - Safari 和 IE 浏览器中 DRM 内容的加密事件等效项
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com