Question

我接近完成此操作，但我在使用gmaps的搜索框时出现问题。
该项目的概念是输入一个邮政编码（在我的例子中是一个固定的，15124）并在地图上显示一些标记（代表该区域的商店）和侧边栏中的名称。
我面临的唯一问题是搜索框具有的auto-complete / getPlaces属性。
如何摆脱这个属性？我只想要一个简单的输入文本，这样我就可以编写z.c.然后把它拿出来进行比较，看它是否真实。
这是我的代码：

<!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>

Answer 1

如何添加搜索框

1确保已加载Places Library，例如：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>

注意：要使用此库中包含的功能，您必须首先使用Maps API引导程序中的libraries参数加载它网址：libraries=places

创建搜索框并将其链接到UI元素。

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初始化搜索框控件：

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


    });
}

示例

＆＃13;
＆＃13;
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);
＆＃13;
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; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

我在Google网站上找到了这个示例，它是一个完整的HTML文件：

#include <windows.h>
#include <stdio.h>    

int main(void)
{

    HANDLE hFile1;
    FILETIME ftCreate;
    SYSTEMTIME stUTC, stLocal;
    hFile1 = CreateFile("mytestfile.txt", GENERIC_READ, FILE_SHARE_READ,  NULL,  OPEN_EXISTING,  FILE_ATTRIBUTE_NORMAL, NULL);

    if(hFile1 == INVALID_HANDLE_VALUE)
    {
        printf("Could not open file, error %ul\n", GetLastError());
        return -1;
    }

    if(!GetFileTime(hFile1, &ftCreate, NULL, NULL))
    {
        printf("Something wrong!\n");
        return FALSE;
    }

    FileTimeToSystemTime(&ftCreate, &stUTC);
    printf("UTC System Time format:\n");
    printf("Created on: %02d/%02d/%d %02d:%02d\n", stUTC.wDay, stUTC.wMonth, stUTC.wYear, stUTC.wHour, stUTC.wMinute);

    return 0;

}

我希望它会有用......

来源：https://developers.google.com/maps/documentation/javascript/examples/places-searchbox

将定位器存储在谷歌地图中，输入邮政编码并在地图和侧边栏上显示标记

2 个答案:

将定位器存储在谷歌地图中，​​输入邮政编码并在地图和侧边栏上显示标记

2 个答案:

将定位器存储在谷歌地图中，输入邮政编码并在地图和侧边栏上显示标记