2014-09-02 52 views
-2

你好。我使用了示例代碼,但我無法修改它。你能否請幫忙 - 即使頭部足夠了,我應該能夠弄清楚。謝謝不能修改代碼,谷歌地圖API頁面

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <script type="text/javascript"> 
    //<![CDATA[ 
    var map; 
    var markers = []; 
    var infoWindow; 
    var locationSelect; 

    function load() { 
     map = new google.maps.Map(document.getElementById("map"), { 
     center: new google.maps.LatLng(50, -10), 
     zoom: 4, 
     mapTypeId: 'roadmap', 
     mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU} 
     }); 
     infoWindow = new google.maps.InfoWindow(); 

     locationSelect = document.getElementById("locationSelect"); 
     locationSelect.onchange = function() { 
     var markerNum = locationSelect.options[locationSelect.selectedIndex].value; 
     if (markerNum != "none"){ 
      google.maps.event.trigger(markers[markerNum], 'click'); 
     } 
     }; 
    } 

    function searchLocations() { 
    var address = document.getElementById("addressInput").value; 
    var geocoder = new google.maps.Geocoder(); 
    geocoder.geocode({address: address}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
     searchLocationsNear(results[0].geometry.location); 
     } else { 
     alert(address + ' not found'); 
     } 
    }); 
    } 

    function clearLocations() { 
    infoWindow.close(); 
    for (var i = 0; i < markers.length; i++) { 
     markers[i].setMap(null); 
    } 
    markers.length = 0; 

    locationSelect.innerHTML = ""; 
    var option = document.createElement("option"); 
    option.value = "none"; 
    option.innerHTML = "See all results:"; 
    locationSelect.appendChild(option); 
    } 

    function searchLocationsNear(center) { 
    clearLocations(); 

    var radius = document.getElementById('radiusSelect').value; 
    var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius; 
    downloadUrl(searchUrl, function(data) { 
     var xml = parseXml(data); 
     var markerNodes = xml.documentElement.getElementsByTagName("marker"); 
     var bounds = new google.maps.LatLngBounds(); 
     for (var i = 0; i < markerNodes.length; i++) { 
     var name = markerNodes[i].getAttribute("name"); 
     var address = markerNodes[i].getAttribute("address"); 
     var distance = parseFloat(markerNodes[i].getAttribute("distance")); 
     var latlng = new google.maps.LatLng(
       parseFloat(markerNodes[i].getAttribute("lat")), 
       parseFloat(markerNodes[i].getAttribute("lng"))); 

     createOption(name, distance, i); 
     createMarker(latlng, name, address); 
     bounds.extend(latlng); 
     } 
     map.fitBounds(bounds); 
     locationSelect.style.visibility = "visible"; 
     locationSelect.onchange = function() { 
     var markerNum = locationSelect.options[locationSelect.selectedIndex].value; 
     google.maps.event.trigger(markers[markerNum], 'click'); 
     }; 
     }); 
    } 

    function createMarker(latlng, name, address) { 
     var html = "<b>" + name + "</b> <br/>" + address; 
     var marker = new google.maps.Marker({ 
     map: map, 
     position: latlng 
     }); 
     google.maps.event.addListener(marker, 'click', function() { 
     infoWindow.setContent(html); 
     infoWindow.open(map, marker); 
     }); 
     markers.push(marker); 
    } 

    function createOption(name, distance, num) { 
     var option = document.createElement("option"); 
     option.value = num; 
     option.innerHTML = name + "(" + distance.toFixed(1) + ")"; 
     locationSelect.appendChild(option); 
    } 

    function downloadUrl(url, callback) { 
     var request = window.ActiveXObject ? 
      new ActiveXObject('Microsoft.XMLHTTP') : 
      new XMLHttpRequest; 

     request.onreadystatechange = function() { 
     if (request.readyState == 4) { 
      request.onreadystatechange = doNothing; 
      callback(request.responseText, request.status); 
     } 
     }; 

     request.open('GET', url, true); 
     request.send(null); 
    } 

    function parseXml(str) { 
     if (window.ActiveXObject) { 
     var doc = new ActiveXObject('Microsoft.XMLDOM'); 
     doc.loadXML(str); 
     return doc; 
     } else if (window.DOMParser) { 
     return (new DOMParser).parseFromString(str, 'text/xml'); 
     } 
    } 

    function doNothing() {} 

    //]]> 
    </script> 
    </head> 

    <body style="margin:0px; padding:0px;" onload="load()"> 
    <div> 
    <input type="text" id="addressInput" size="20"/> 
    <select id="radiusSelect"> 
     <option value="25" selected>25mi</option> 
     <option value="100">100mi</option> 
     <option value="200">200mi</option> 
    </select> 
    <input type="button" onclick="searchLocations()" value="Search"/> 
    </div> 
    <div><select id="locationSelect" style="width:100%;visibility:hidden"></select></div> 
    <div id="map" style="width: 100%; height: 80%"></div> 

    </body> 
</html> 
+3

什麼是你希望做什麼? – 2014-09-02 14:22:32

+0

任何事 - 我甚至不能在其中放置標題。我認爲這是因爲身體標籤中的風格。任何機會,你可以找出如何把標題/導航欄? – struggling 2014-09-02 14:26:56

+0

我無法找到任何東西,多數民衆贊成停止放置在頁面其他內容。 – 2014-09-02 14:30:24

回答

0

我已經添加了標題和它的工作正常。

<body style="margin:0px; padding:0px;" onload="load()"><header><h1>AAAAAAAAAAAA</h1></header> 
+0

非常感謝 - 我不知道爲什麼它會不早工作了! – struggling 2014-09-02 15:09:45

+0

好的,如果有任何問題讓我知道。 – 2014-09-02 15:10:29