Comment positionner Google Maps boîte InfoWindow près du sommet et le style erreur

-1

J'ai développé cette plunker sample:Comment positionner Google Maps boîte InfoWindow près du sommet et le style erreur

Cliquez sur « Voir Canada Carte Message » pour voir le infowindow.

Je souhaite que l'infowindow soit positionné près du bord supérieur de la carte ou au milieu de la partie supérieure. En outre, je veux styliser l'infowindow pour apparaître comme message d'erreur avec l'icône d'indicateur d'erreur.

Code Voir exemple ci-dessous:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Simple Map</title> 
    <meta name="viewport" content="initial-scale=1.0"> 
    <meta charset="utf-8"> 
    <style> 
     /* Always set the map height explicitly to define the size of the div 
     * element that contains the map. */ 
     #map { 
     height: 100%; 
     } 
     /* Optional: Makes the sample page fill the window. */ 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
    </style> 
    </head> 
    <body > 
    <input type="button" value="Init Map" onclick="initMap()"> 
    <input type="button" value="View Canada Map with Message" onclick="viewCanadaWithMessage()"> 

    <div id="map"></div> 
    <script> 
     var mapDiv = document.getElementById('map'); 
     var map; 
     var infoWindow; 
    var geocoder ; 
    var map; 
    var palce; 
    function initMap() { 
     map = new google.maps.Map(mapDiv, { 
     center: {lat: -34.397, lng: 150.644}, 
     zoom: 8 
     }); 
     infoWindow = new google.maps.InfoWindow; 
     infoWindow.setPosition(map.getCenter()); 
     infoWindow.setContent('This is the center of the map'); 
     infoWindow.open(map); 
     geocoder = new google.maps.Geocoder(); 
    } 
    //setTimeout(function(){initMap()}, 100); 
    function doLoad() { 

    } 
    function viewCanadaWithMessage() { 
     //geocoder.geocode({address:'Canberra, Australia'}, function(result, status){ 
     geocoder.geocode({address:'Canada'}, function(result, status){ 
      if (status == "OK") { 
       map.setCenter(result[0].geometry.location); 
       map.setZoom(3); 
       var infoWindow = new google.maps.InfoWindow; 
       infoWindow.setContent('<strong>How I can locate this info window to be near the top, approx in the middle between the top point and the middle point? I want this window to display <span style="color:red">error message</span> with error indicator icon.</strong>'); 
       infoWindow.setPosition(map.getCenter()); 
       infoWindow.open(map); 
      } 
     }); 
    } 
    //google.maps.event.addDomListener(window, 'load', initMap); 
    document.onreadystatechange = function() { 
     if (document.readyState === 'complete') { 
     initMap(); 
     google.maps.event.addDomListener(mapDiv, 'click', function() { 
      alert('clicked'); 
     }) 
     } 
    }; 

    </script> 
    <script language="JavaScript" > 
    <!-- 
    document.writeln("<script async defer src=\"https://maps.googleapis.com/maps/api/js?key=AIzaSyAh7w3_pTxbOFG3tT2P8ZDTwxDnp5A2GNw&callback=doLoad\"></script>"); 
    //--> 
    </script> 
    </body> 
</html>

Comment calculer la position (latitude, lng) qui sera proche de la partie supérieure, et comment je peux le style de la infowindow pour ressembler à un message d'erreur?

Source

2017-08-17 tarekahf

Je l'ai fait une analyse, et réalisé que je peux trouver le point médian approximatif entre le haut et le centre en utilisant cet extrait de code:

var center = JSON.parse(JSON.stringify(map.getCenter())); 
var boundaries = JSON.parse(JSON.stringify(map.getBounds())); 
var newPosition = {lat: center.lat + Math.abs(boundaries.north - center.lat)/2.75, lng: center.lng}; 
infoWindow.setContent('<strong>How I can locate this info window to be near the top, approx in the middle between the top point and the middle point? I want this window to display <span style="color:red">error message</span> with error indicator icon.</strong>'); 
infoWindow.setPosition(newPosition);

Voir plnker sample here.

J'espère que c'est la bonne façon. S'il vous plaît laissez-moi savoir si vous avez une meilleure solution.

Maintenant, je dois styliser l'infowindow pour qu'il apparaisse comme une erreur. Apprécier ton aide.

Source

2017-08-17 20:23:47 tarekahf

Comment positionner Google Maps boîte InfoWindow près du sommet et le style erreur

Répondre

Questions connexes