如何定位爲錯誤

-1

靠近頂部和風格的谷歌地圖信息窗口框我已經開發了這個plunker sample：如何定位爲錯誤

點擊「查看加拿大地圖與消息」看到信息窗口。

我想將infowindow放置在地圖邊界頂部附近或上部中間。另外，我想將infowindow設置爲帶有錯誤指示器圖標的錯誤消息。

見下面的示例代碼：

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

如何計算，這將是接近上側，我怎麼可以風格的信息窗口看起來像一個錯誤信息的位置（緯度，經度）？

來源

2017-08-17 tarekahf

我做了一些分析，並意識到，我可以找到頂部和使用此代碼段中心之間的近似中點：

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

見plnker sample here。

我希望這是正確的方法。請讓我知道，如果你更好的解決方案。

現在，我需要將infowindow設置爲出現錯誤。感謝你的幫助。

來源

2017-08-17 20:23:47 tarekahf

如何定位爲錯誤

回答

相關問題