帶有KML圖層的Google Maps API，如何添加搜索框？

Question

我正在制作一個帶有kml圖層的城市分區地圖。 我想添加一個搜索框，以便搜索地址。

我將如何增加這個，我的地圖？ 我還是編碼的新手，所以解釋越簡單越好！ 雖然，我不是一個完整的白痴。

 <html> <head> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var map; // lets define some vars to make things easier later var kml = { a: { name: "City of Forest Lake", url: "http://forestlakezoning.weebly.com/uploads/5/3/5/6/53562351/forest_lake.kmz" }, b: { name: "C - Conservation", url: "http://forestlakezoning.weebly.com/uploads/5/3/5/6/53562351/c.kmz" } // keep adding more if ye like }; // initialize our goo function initializeMap() { var options = { center: new google.maps.LatLng(45.25, -92.95), zoom: 12, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), options); createTogglers(); }; google.maps.event.addDomListener(window, 'load', initializeMap); // the important function... kml[id].xxxxx refers back to the top function toggleKML(checked, id) { if (checked) { var layer = new google.maps.KmlLayer(kml[id].url, { preserveViewport: true, suppressInfoWindows: true }); // store kml as obj kml[id].obj = layer; kml[id].obj.setMap(map); } else { kml[id].obj.setMap(null); delete kml[id].obj; } }; // create the controls dynamically because it's easier, really function createTogglers() { var html = "<form><ul>"; for (var prop in kml) { html += "<li id=\\"selector-" + prop + "\\"><input type='checkbox' id='" + prop + "'" + " onclick='highlight(this,\\"selector-" + prop + "\\"); toggleKML(this.checked, this.id)' \\/>" + kml[prop].name + "<\\/li>"; } html += "<li class='control'><a href='#' onclick='removeAll();return false;'>" + "Remove all layers<\\/a><\\/li>" + "<\\/ul><\\/form>"; document.getElementById("toggle_box").innerHTML = html; }; // easy way to remove all objects function removeAll() { for (var prop in kml) { if (kml[prop].obj) { kml[prop].obj.setMap(null); delete kml[prop].obj; } } }; // Append Class on Select function highlight(box, listitem) { var selected = 'selected'; var normal = 'normal'; document.getElementById(listitem).className = (box.checked ? selected: normal); }; function startup() { // for example, this toggles kml b on load and updates the menu selector var checkit = document.getElementById('a'); checkit.checked = true; toggleKML(checkit, 'a'); highlight(checkit, 'selector1'); } </script> <style type="text/css"> .selected { font-weight: bold; } } #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> </head> <body onload="startup()"> <div id="map_canvas" style="width: 100%; height: 600px;"></div> <div id="toggle_box" style="position: overflow; top: 100px; right: 20px; padding: 10px; background: #fff; z-index: 1; "></div> </body> </html>

Answer 1

請參閱文檔中的示例

 var map; var geocoder = new google.maps.Geocoder(); function codeAddress() { var address = document.getElementById("address").value; geocoder.geocode({ 'address': address }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { if (!!results[0].geometry.viewport) { map.fitBounds(results[0].geometry.viewport); } else if (!!results[0].geometry.bounds) { map.fitBounds(results[0].geometry.bounds); } else { map.setCenter(results[0].geometry.location); } } else { alert("Geocode was not successful for the following reason: " + status); } }); } // lets define some vars to make things easier later var kml = { a: { name: "City of Forest Lake", url: "http://forestlakezoning.weebly.com/uploads/5/3/5/6/53562351/forest_lake.kmz" }, b: { name: "C - Conservation", url: "http://forestlakezoning.weebly.com/uploads/5/3/5/6/53562351/c.kmz" } // keep adding more if ye like }; // initialize our goo function initializeMap() { var options = { center: new google.maps.LatLng(45.25, -92.95), zoom: 12, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), options); createTogglers(); }; google.maps.event.addDomListener(window, 'load', initializeMap); // the important function... kml[id].xxxxx refers back to the top function toggleKML(checked, id) { if (checked) { var layer = new google.maps.KmlLayer(kml[id].url, { preserveViewport: true, suppressInfoWindows: true }); // store kml as obj kml[id].obj = layer; kml[id].obj.setMap(map); } else { kml[id].obj.setMap(null); delete kml[id].obj; } }; // create the controls dynamically because it's easier, really function createTogglers() { var html = "<form><ul>"; for (var prop in kml) { html += "<li id=\\"selector-" + prop + "\\"><input type='checkbox' id='" + prop + "'" + " onclick='highlight(this,\\"selector-" + prop + "\\"); toggleKML(this.checked, this.id)' \\/>" + kml[prop].name + "<\\/li>"; } html += "<li class='control'><a href='#' onclick='removeAll();return false;'>" + "Remove all layers<\\/a><\\/li>" + "<\\/ul><\\/form>"; document.getElementById("toggle_box").innerHTML = html; }; // easy way to remove all objects function removeAll() { for (var prop in kml) { if (kml[prop].obj) { kml[prop].obj.setMap(null); delete kml[prop].obj; } } }; // Append Class on Select function highlight(box, listitem) { var selected = 'selected'; var normal = 'normal'; document.getElementById(listitem).className = (box.checked ? selected : normal); }; function startup() { // for example, this toggles kml b on load and updates the menu selector var checkit = document.getElementById('a'); checkit.checked = true; toggleKML(checkit, 'a'); highlight(checkit, 'selector1'); } google.maps.event.addDomListener(window, 'load', startup);

 .selected { font-weight: bold; } } #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 type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script> <input type="button" id="btn" value="Go!" onclick="codeAddress();" /> <input type="text" id="address" value="Columbus, MN" /> <div id="map_canvas" style="width: 100%; height: 600px;"></div> <div id="toggle_box" style="position: overflow; top: 100px; right: 20px; padding: 10px; background: #fff; z-index: 1; "></div>

Answer 2

如何添加搜索框

1載入地點庫，例如：

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

注意：要使用此庫中包含的功能，必須首先使用Maps API引導程序網址中的librarys參數加載它： 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);


    });
}

完整的例子

 var map; // lets define some vars to make things easier later var kml = { a: { name: "City of Forest Lake", url: "http://forestlakezoning.weebly.com/uploads/5/3/5/6/53562351/forest_lake.kmz" }, b: { name: "C - Conservation", url: "http://forestlakezoning.weebly.com/uploads/5/3/5/6/53562351/c.kmz" } // keep adding more if ye like }; // initialize our goo function initializeMap() { var options = { center: new google.maps.LatLng(45.25, -92.95), zoom: 12, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), options); createTogglers(); initSearchBox(map, 'pac-input'); }; google.maps.event.addDomListener(window, 'load', initializeMap); 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); }); } // the important function... kml[id].xxxxx refers back to the top function toggleKML(checked, id) { if (checked) { var layer = new google.maps.KmlLayer(kml[id].url, { preserveViewport: true, suppressInfoWindows: true }); // store kml as obj kml[id].obj = layer; kml[id].obj.setMap(map); } else { kml[id].obj.setMap(null); delete kml[id].obj; } }; // create the controls dynamically because it's easier, really function createTogglers() { var html = "<form><ul>"; for (var prop in kml) { html += "<li id=\\"selector-" + prop + "\\"><input type='checkbox' id='" + prop + "'" + " onclick='highlight(this,\\"selector-" + prop + "\\"); toggleKML(this.checked, this.id)' \\/>" + kml[prop].name + "<\\/li>"; } html += "<li class='control'><a href='#' onclick='removeAll();return false;'>" + "Remove all layers<\\/a><\\/li>" + "<\\/ul><\\/form>"; document.getElementById("toggle_box").innerHTML = html; }; // easy way to remove all objects function removeAll() { for (var prop in kml) { if (kml[prop].obj) { kml[prop].obj.setMap(null); delete kml[prop].obj; } } }; // Append Class on Select function highlight(box, listitem) { var selected = 'selected'; var normal = 'normal'; document.getElementById(listitem).className = (box.checked ? selected : normal); }; function startup() { // for example, this toggles kml b on load and updates the menu selector var checkit = document.getElementById('a'); checkit.checked = true; toggleKML(checkit, 'a'); highlight(checkit, 'selector1'); }

 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> <style> .selected { font-weight: bold; } #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> <body onload="startup()"> <input id="pac-input" class="controls" type="text" placeholder="Search Box"> <div id="map_canvas" style="width: 100%; height: 600px;"></div> <div id="toggle_box" style="position: overflow; top: 100px; right: 20px; padding: 10px; background: #fff; z-index: 1; "></div> </body>

帶有KML圖層的Google Maps API，如何添加搜索框？

問題描述

2 個解決方案

解決方案1
1 2015-06-05 19:12:42

解決方案2
0 2015-06-05 19:23:19

如何添加搜索框

帶有KML圖層的Google Maps API，如何添加搜索框？

問題描述

2 個解決方案

解決方案1 1 2015-06-05 19:12:42

解決方案2 0 2015-06-05 19:23:19

如何添加搜索框

解決方案1
1 2015-06-05 19:12:42

解決方案2
0 2015-06-05 19:23:19