2015-02-24 61 views
0

我想TEXTSEARCH添加到我的劇本,但是當我添加它,地圖不顯示,這裏是我的主腳本:添加文本搜索到我的谷歌地圖腳本

<script src="http://maps.google.com/maps/api/js?sensor=true"></script> 
<script> 
    function writeAddressName(latLng) { 
    var geocoder = new google.maps.Geocoder(); 
    geocoder.geocode({ 
     "location": latLng 
    }, 
    function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) 
     document.getElementById("address").innerHTML = results[0].formatted_address; 
     else 
     document.getElementById("error").innerHTML += "Unable to retrieve your address" + "<br />"; 
    }); 
    } 

    function geolocationSuccess(position) { 
    var userLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
    // Write the formatted address 
    writeAddressName(userLatLng); 

    var myOptions = { 

     center : userLatLng, 
     zoom : 10, 
     mapTypeId : google.maps.MapTypeId.ROADMAP 
    }; 

    // Draw the map 
    var mapObject = new google.maps.Map(document.getElementById("map"), myOptions); 
    // Place the marker 
    new google.maps.Marker({ 
     map: mapObject, 
     position: userLatLng 
    }); 
    // Draw a circle around the user position to have an idea of the current localization accuracy 
    var circle = new google.maps.Circle({ 
     center: userLatLng, 
     radius: 800, 
     map: mapObject, 
     fillColor: '#FFF32F', 
     fillOpacity: 0.5, 
     strokeColor: '#F1E401', 
     strokeOpacity: 1.0 
    }); 
    mapObject.fitBounds(circle.getBounds()); 
    } 

    function geolocationError(positionError) { 
    document.getElementById("error").innerHTML += "Error: " + positionError.message + "<br />"; 
    } 

    function geolocateUser() { 
    // If the browser supports the Geolocation API 
    if (navigator.geolocation) 
    { 
     var positionOptions = { 
     enableHighAccuracy: true, 
     timeout: 10 * 1000 // 10 seconds 
     }; 
     navigator.geolocation.getCurrentPosition(geolocationSuccess, geolocationError, positionOptions); 
    } 
    else 
     document.getElementById("error").innerHTML += "Your browser doesn't support the Geolocation API"; 
    } 

    window.onload = geolocateUser; 
</script> 

基於this example我加入這腳本:

function callback(results, status) { 
    if (status == google.maps.places.PlacesServiceStatus.OK) { 
    for (var i = 0; i < results.length; i++) { 
     createMarker(results[i]); 
    } 
    } 
} 

function createMarker(place) { 
    var placeLoc = place.geometry.location; 
    var marker = new google.maps.Marker({ 
    map: mapObject, 
    position: place.geometry.location 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
    infowindow.setContent(place.name); 
    infowindow.open(mapObject, this); 
    }); 
} 

這給初始化函數:

var circle = new google.maps.Circle({ 
      center: userLatLng, 
      radius: 800, 
      map: mapObject, 
      fillColor: '#FFF32F', 
      fillOpacity: 0.5, 
      strokeColor: '#F1E401', 
      strokeOpacity: 1.0 
     }); 
     mapObject.fitBounds(circle.getBounds()); 
     var request = { 
    location: userLatLng, 
    radius: 4000, 
    types: ['store'] 
    }; 
    infowindow = new google.maps.InfoWindow(); 
    var service = new google.maps.places.PlacesService(mapObject); 
    service.nearbySearch(request, callback); 

但還是不能讓ŧ他放置在地圖上,我想要做的是地理定位某人,然後向該位置添加一個圓圈並顯示周圍的藥店...

+1

一件事值得注意的是,你是在一個函數內聲明和設置你的地圖變量,但在其他地方需要它。因此,在writeAddressName函數聲明之上的新行上將其聲明爲全局變量。所以 - var map; – mindparse 2015-02-24 06:27:28

+0

但仍無法獲取地圖:s @mindparse – 2015-02-24 14:35:52

回答

0

我認爲您可能無法在HTML或CSS文件。您的​​變量也需要在任何函數之外聲明。

我的風格你map如下:

<style> 
     html, body, #map { 
     height: 100%; 
     margin: 0px; 
     padding: 0px 
     } 
</style> 

您還需要包括谷歌地圖V3腳本,渲染你的地圖。

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 

然後我試圖與在的jsfiddle一些HTML和CSS代碼的代碼,它顯示了圓圈的地圖(需要幾秒鐘來獲取用戶的位置和加載地圖): https://jsfiddle.net/whdcuw7c/2/