在Google地图中存储定位器，在地图和侧栏上输入邮政编码和显示标记 [英] Store Locator in google maps, input zip code and display markers on map and sidebar
本文介绍了在Google地图中存储定位器，在地图和侧栏上输入邮政编码和显示标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我即将完成此操作，但遇到gmaps搜索框出现问题。
该项目的概念是键入一个邮政编码（在我的示例中是一个固定的邮政编码，15124），并在地图上显示一些标记（代表该地区的商店）和侧栏中的名称。
唯一问题我面临的是auto-complete / getPlaces搜索框具有的属性。
如何摆脱此属性？
我只想要一个简单的输入文本，以便我可以编写z.c.然后把它和比较它看是否是真的。这是我的代码：
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no/>
< meta http-equiv =content-typecontent =text / html; charset = UTF-8/>
< title> Store Locate< / title>
< script type =text / javascriptsrc =https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=false&libraries=places><<< ; /脚本>
＃pac-input {
background-color：#fff;
font-family：Roboto;
font-size：15px;
font-weight：300;
margin-left：12px;
padding：0 11px 0 13px;
文本溢出：省略号;
width：400px;
}
＃pac-input：focus {
border-color：＃4d90fe;
}
.pac-container {
font-family：Roboto;
}
＃type-selector {
color：#fff;
背景颜色：＃4d90fe;
padding：5px 11px 0px 11px;
}
＃类型选择器标签{
font-family：Roboto;
font-size：13px;
font-weight：300;
}
< / style>
< script type =text / javascript>
var side_bar_html =;
//数组保存side_bar使用的标记和html的副本
var gmarkers = [];
var marker;
var map = null;
var t = 1;
函数initialize（）{
//创建地图
var myOptions = {
zoom：11，
center：new google.maps.LatLng （37.9833333,23.7333333），
mapTypeControl：true，
mapTypeControlOptions：{style：google.maps.MapTypeControlStyle.DROPDOWN_MENU}，
navigationControl：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）
}）;
//此函数启动点击并打开相应的信息窗口
函数myclick（i）{
google.maps.event.trigger（gmarkers [i]，点击）;
函数initSearchBox（map，controlId）{
//创建搜索框并将其链接到UI元素。
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]
//监听用户从
//选择列表中选择一个项目时触发的事件。检索该项目的匹配地点。
google.maps.event.addListener（searchBox，'places_changed'，function（）{
var places = searchBox.getPlaces（）;
if（places.length == 0）{
return;
}
//获得第一名
var place = places [0];
var infowindow = new google.maps.InfoWindow（
{
size：new google.maps.Size（150,50），
content：place.info
}）;
//将标记添加到地图
//设置带有信息窗口的标记
//添加点
if（（document。 （document.getElementById（controlId）.value）== 15124）&& t == 1）{
var point = new google.maps.LatLng（38.0397739,23.8004445）;
var marker = createMarker（point，Relay Marketing，< b> Relay Marketing Services< / b>< Vlahernon 10,15124，Marousi 211 411 2311）
var point = new google.maps.LatLng（38.040933 3,23.7954601）;
var marker = createMarker（point，Nespresso SA，< b> Nespresso SA< / 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 210 614 9800）
var point = new google.maps.LatLng（38.050986,23.8084322）;
var marker = createMarker（point，Just4U，< b> Just4U< / b> Dimitriou Gounari 84,15124，Marousi 210 614 1923）
var point = new google.maps.LatLng（38.0400533,23.8011982）;
var marker = createMarker（point，Ekka Cars SA，< b> Ekka< / b> Leoforos Kifisias 79,15124，Marousi< 210 349 8000）
//将装配的side_bar_html内容放入side_bar div
document.getElementById（side_bar）。innerHTML = side_bar_html;
t - = 1; //如果再次搜索，它将不再显示在边栏中
}
map.fitBounds（place.geometry.viewport）;
}）;
}
//创建标记并设置事件窗口函数的函数
函数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）;
}）;
//保存我们需要稍后用于side_bar的信息
gmarkers.push（marker）;
//向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-inputclass =controlstype =textplaceholder =Ταχυδρομικόςκωδικός>
< table border =1>
< tr>
< td>
< div id =map_canvasstyle =width：550px; height：450px>< / div>
< / td>
< td valign =topstyle =width：160px; text-decoration：underline; color：＃4444ff;>
< div id =side_bar>< / div> < HR />
< / td>
< / tr>
< / table>
< / body>
< / html>
解决方案
如何添加搜索框
1确保 Places库，例如：
< script type =text / javascriptsrc =https：// maps.googleapis.com/maps/api/js?libraries=places\"></script>
注意：要使用此库中包含的功能，您必须使用
首先使用Maps API引导中的库参数加载它
URL：libraries = places
- 创建搜索框并将其链接到UI元素。
HTML：
< input id =pac-inputclass =controlstype = textplaceholder =搜索框>
JavaScript：
//创建搜索框并将其链接到UI元素。
var input =（document.getElementById（controlId））;
map.controls [google.maps.ControlPosition.TOP_LEFT] .push（input）;
var searchBox = new google.maps.places.SearchBox（input）;
<3>初始化搜索框控件：
函数initSearchBox（map，controlId）{
//创建搜索框并将其链接到UI元素。
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]
//监听用户从
//选择列表中选择一个项目时触发的事件。检索该项目的匹配地点。
google.maps.event.addListener（searchBox，'places_changed'，function（）{
var places = searchBox.getPlaces（）;
if（places.length == 0）{
return;
}
//获得第一名
var place = places [0];
var marker =新的google.maps.Marker（{
map：map，
title：place.name，
position：place.geometry.location
}）;
map.fitBounds（place.geometry.viewport）;
}）;
}
示例
function initialize（）{var mapOptions = {zoom：10，center：new google.maps.LatLng（40.714364，-74.005972），mapTypeId：google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map（document.getElementById（map-canvas），mapOptions）; var locations = [['New York'，40.714364，-74.005972，'http://www.google.com/intl/zh-CN/mapfiles/ms/micons/green-dot.png']]; var infowindow = new google.maps.InfoWindow（）; google.maps.event.addListener（map，'click'，function（）{infowindow.close（）;}）; var markers = [];对于（var i = 0; i< locations.length; i ++）{var marker = new google.maps.Marker（{position：new google.maps.LatLng（locations [i] [1]，locations [i] [ 2]），map：map，icon：locations [i] [3]}）; google.maps.event.addListener（marker，'click'，（function（marker，i）{return function（）{infowindow.setContent（locations [i] [0]）; infowindow.open（map，marker）;} }）（marker，i））; markers.push（标记）; } initSearchBox（map，'pac-input'）;}函数initSearchBox（map，controlId）{//创建搜索框并将其链接到UI元素。 var input =（document.getElementById（controlId））; map.controls [google.maps.ControlPosition.TOP_LEFT] .push（输入）; var searchBox = new google.maps.places.SearchBox（input）; // [START region_getplaces] //当用户从//选择列表中选择一个项目时，监听所触发的事件。检索该项目的匹配地点。 google.maps.event.addListener（searchBox，'places_changed'，function（）{var places = searchBox.getPlaces（）; if（places.length == 0）{return;} //获得第一名var place = places [ 0]; var marker = new google.maps.Marker（{map：map，title：place.name，position：place.geometry.location，icon：'http://www.google.com/intl/zh-CN/mapfiles /ms/micons/green-dot.png'}）; map.fitBounds（place.geometry.viewport）;}）;} google.maps.event.addDomListener（window，'load'，initialize）;
html，body，＃map-canvas {height：100％; margin：0px; padding：0px;}。controls {margin-top：16px;边框：1px实心透明; border-radius：2px 0 0 2px;盒子尺寸：边框; -moz-box-sizing：border-box; height：32px;概要：无; box-shadow：0 2px 6px rgba（0，0，0，0.3）;}＃pac-input {background-color：#fff;字体家族：Roboto; font-size：15px; font-weight：300; margin-left：12px;填充：0 11px 0 13px;文本溢出：省略号; 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;}
< script src = https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places\"> ;</script><input id =pac-inputclass = controlstype =textplaceholder =Search Box>< div id =map-canvas>< / div>
I'm close to finishing this but I'm having a trouble with the Search box of gmaps.
The concept of the project is to type in a zip code(in my example a fixed one, 15124) and display on the map a number of markers(representing the stores in that area) and in a sidebar their names.
The only problem I am facing is the auto-complete/getPlaces property that the search-box has.
How do I get rid of this property?
I just want a plain input text so that i can write the z.c. and then take that and compare it to see if it's true.
Here's my code:
<!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"></script>
#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 = {
zoom: 11,
center: new google.maps.LatLng(37.9833333, 23.7333333),
mapTypeControl: true,
mapTypeControlOptions:{style:google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: 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
if ((document.getElementById(controlId).value) == ("Marousi, 15124, Vorios Tomeas Athinon, Greece" ||(document.getElementById(controlId).value) == 15124) && t==1){
var point = new google.maps.LatLng(38.0397739,23.8004445);
var marker = createMarker(point,"Relay Marketing","<b>Relay Marketing Services</b> <br>Vlahernon 10,15124,Marousi<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="Ταχυδρομικός κωδικός">
<table border="1">
<tr>
<td>
<div id="map_canvas" style="width: 550px; height: 450px"></div>
</td>
<td valign="top" style="width:160px; text-decoration: underline; color: #4444ff;">
<div id="side_bar"></div> <hr/>
</td>
</tr>
</table>
</body>
</html>
解决方案
How to add search box
1 Ensure Places Library is loaded, for example:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
Note: To use the functionality contained within this library, you must first load it using the libraries parameter in the Maps API bootstrap URL:
libraries=places
- Create the search box and link it to the UI element.
HTML:
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
JavaScript:
// 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);
3 Initialize Search Box control:
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 marker = new google.maps.Marker({
map: map,
title: place.name,
position: place.geometry.location
});
map.fitBounds(place.geometry.viewport);
});
}
Example
function initialize() {
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(40.714364, -74.005972),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var locations = [
['New York', 40.714364, -74.005972, 'http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png']
];
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(map, 'click', function () {
infowindow.close();
});
var markers = [];
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: locations[i][3]
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
markers.push(marker);
}
initSearchBox(map, 'pac-input');
}
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 marker = new google.maps.Marker({
map: map,
title: place.name,
position: place.geometry.location,
icon: 'http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png'
});
map.fitBounds(place.geometry.viewport);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px;
}
.controls {
margin-top: 16px;
border: 1px solid transparent;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 32px;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#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;
}
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map-canvas"></div>
这篇关于在Google地图中存储定位器，在地图和侧栏上输入邮政编码和显示标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
