2015-10-16 122 views
0

我正在將地圖版本2 api轉換爲版本3。轉換後,我沒有語法或javascript錯誤,但我的地圖不顯示。該映射被動態生成爲一個字符串並加載到Delphi Xe2中的TWebBrowser組件中。谷歌地圖javascript api V3未顯示地圖

要調試,在生成HTML後這樣我就可以把它複製到一個HTML文件,並用鍍鉻或IE瀏覽它,我設置一個斷點。

任何幫助,非常感謝!

這裏是所生成的文件的鏈接: TestLatestHtml 下面是在Delphi .PAS文件的鏈接: enter link description here

這裏是所生成的代碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> 
<head> 
    <title>Google Maps</title> 
    <meta name="viewport" content="initial-scale=1.0"/> 
    <meta charset=utf-8"/> 
    <style type="text/css"> 
    html, body {width: 100%; height: 100px;} 
    body {margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: 0px;} 
    #map {height: 400px; margin: 0; padding: 0;} 
    </Style> 
    <script type="text/javascript"> 
    function GetMarker(csid, myLat, MyLong, premise) { 
    if (premise) { 
    var marker = new google.maps.Marker({position: {lat:28.3280638, lng:-81.4025985}, label: csid, map: map, icon: icon1}); 
} 
else { 
    var marker = new google.maps.Marker({position: {lat: 28.3280638, lng: -81.4025985}, label: csid, map: map, icon: icon2}); 
} 
} 
function NewMarker(Info, MyLat,MyLong, premise) { 
    var mk2 = GetMarker(Info, MyLat, MyLong, premise); 
}; 
</script> 
</head> 

<body>  
<div id="map" style="width: 600px; height: 400px"></div>  
<script> 
function initialize() { 
    var map; var icon1,icon2; 
    map = new google.maps.Map(document.getElementById("map"), {center: {lat:28.3280638, lng:-81.4025985}, zoom: 15}); 
    icon1 = new GIcon(G_DEFAULT_ICON, "http://www.unisdr.org/campaign/resilientcities/assets/images/template/google-maps-blue-pin.png"); 
icon2 = new GIcon(G_DEFAULT_ICON, "http://www.unisdr.org/campaign/resilientcities/assets/images/template/google-maps-red-pin.png"); 
var mk = NewMarker("<b>Charles~Cassandra</b><br/>Testor<br/> (407)870-0040",28.3280638 ,-81.4025985, true); 
};  
</script>  
<script type="text/javascript" 
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC39BI6ULNfGzXW_ABqLwuvPx-Sm9mYGcY"&callback=initialize> 
</script> 
</body> 
</html> 

這裏是DEPHI生成代碼的功能:

function TGoogleMap.GetMapHTML(MarketHeader:String; MyLat, MyLong : String): String; 

function GetSubAddress:String; 
var 
loop : Integer; 
begin 
    Result := ''; 
    for loop := low(FMarkers) to High(Fmarkers) do begin 
    if (Fmarkers[loop].Lat <> '') then 
     Result := Result + '  AddMarker("'+ Fmarkers[loop].Info + '",' + Fmarkers[loop].Lat + ' ,' + Fmarkers[loop].Lon +',false); ' + #13#10 ; 
//  Result := Result + '  map.addOverlay(GetMarker("'+ Fmarkers[loop].Info + '",' + Fmarkers[loop].Lat + ' ,' + Fmarkers[loop].Lon +',false)); ' + #13#10 ; 
    end; 

end; 

begin 
Result := 
    '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ' + 
    ' "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> ' + 
    '<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"> ' + 
    ' <head> ' + 
    ' <title>Google Maps</title> ' + 
    ' <meta name="viewport" content="initial-scale=1.0"/> ' + 
    ' <meta charset=utf-8"/> ' + 

    ' <style type="text/css">' + 
// ' v\:* {behavior:url(#default#VML);}' + 
    ' html, body {width: 100%; height: 100%;}' + 
    ' body {margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: 0px;}' + 
    ' </Style>' + 

    ' <script type="text/javascript"> ' + 

    ' function GetMarker(csid, myLat, MyLong, premise) { ' + 
// ' var point = new GLatLng(MyLat,MyLong); ' + 
    '  if (premise) {' + 
    '  var marker = new google.maps.Marker({' + 
    '   position: {lat:' +myLat+ ', lng:' +MyLong+ '},' + 
    '   label: csid,' + 
    '   map: map,' + 
    '   icon: icon1' + 
    '  });' + 
    '  }' + 
    '  else {' + 
    '  var marker = new google.maps.Marker({' + 
    '   position: {lat: ' +myLat+', lng: ' +MyLong+ '},' + 
    '   label: csid,' + 
    '   map: map,' + 
    '   icon: icon2' + 
    '  });' + 
    '  }' + 

// '  google.maps.event.addListener(map, "click", function(event) { ' + 
// '  marker.openInfoWindowHtml(csid); ' + 
// ' 
// '   }); ' + 
// '  return marker; ' + 
    ' } ' + 

    ' function NewMarker(Info, MyLat,MyLong, premise) {' + 
    '  var mk2 = GetMarker(Info, MyLat, MyLong, premise); ' + 
// '  map.addOverlay(mk2);'+ 
    ' };' + 
    ' </script> ' + 

    ' </head> ' + 
// ' <body onload="initialize()" onunload="GUnload()"> ' + 
    ' <body> ' + 
    ' <div id="map" style="width: 600px; height: 300px"></div> ' + 
    ' <script>' + 
    ' function initialize() { ' + 
    ' var map;' + 
    ' var icon1,icon2; ' + 

    '  map = new google.maps.Map(document.getElementById("map"), {center: {lat:' + MyLat +', lng:' + MyLong + '}, zoom: 15}); ' + 
    '  icon1 = new GIcon(G_DEFAULT_ICON, "http://www.unisdr.org/campaign/resilientcities/assets/images/template/google-maps-blue-pin.png");' + 
    '  icon2 = new GIcon(G_DEFAULT_ICON, "http://www.unisdr.org/campaign/resilientcities/assets/images/template/google-maps-red-pin.png");' ; 

     Result := Result + GetSubAddress; // retrieve the additional markers to display. 
     Result := Result + 

    '  var mk = NewMarker("' + MarketHeader + '",' + MyLat + ' ,' +MyLong +', true);' + 
// '  map.addOverlay(mk); ' + 
// '  map.setCenter(new GLatLng(' + Lat + ' ,' +Long +'), ' + IntToStr(FZoomLevel) + '); ' + 
// '  map.addControl(new GScaleControl()); ' + 
// '  map.addControl(new GOverviewMapControl()); ' + 

    ' }; ' + 
    ' </script>' + 
    ' <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC39BI6ULNfGzXW_ABqLwuvPx-Sm9mYGcY" &callback=initialize></script>' + 
    ' </body> ' + 
    '</html> '; 

    mmWeb.Lines.Add('************************'); 
    mmWeb.Lines.Add(Result); 

end; 

回答

1

The Google Maps Javasc RIPT API V3不支持GIcon(這是一個谷歌地圖JavaScript API第2的東西,所有的Gxxxx類被google.maps.xxxx類代替)

使用google.maps.Icon匿名對象,而不是:

icon1 = { 
    url: "http://www.unisdr.org/campaign/resilientcities/assets/images/template/google-maps-blue-pin.png" 
}; 
icon2 = { 
    url: "http://www.unisdr.org/campaign/resilientcities/assets/images/template/google-maps-red-pin.png" 
}; 

一對夫婦的未成年人範圍問題(地圖,ICON1,ICON2是本地的初始化函數)和它的作品對我來說:

working fiddle

代碼片段:

var map; 
 
var icon1, icon2; 
 

 
function GetMarker(csid, myLat, MyLong, premise) { 
 
    if (premise) { 
 
    var marker = new google.maps.Marker({ 
 
     position: { 
 
     lat: 28.3280638, 
 
     lng: -81.4025985 
 
     }, 
 
     label: csid, 
 
     map: map, 
 
     icon: icon1 
 
    }); 
 
    } else { 
 
    var marker = new google.maps.Marker({ 
 
     position: { 
 
     lat: 28.3280638, 
 
     lng: -81.4025985 
 
     }, 
 
     label: csid, 
 
     map: map, 
 
     icon: icon2 
 
    }); 
 
    } 
 
} 
 

 
function NewMarker(Info, MyLat, MyLong, premise) { 
 
    var mk2 = GetMarker(Info, MyLat, MyLong, premise); 
 
}; 
 

 
function initialize() { 
 
    map = new google.maps.Map(document.getElementById("map"), { 
 
    center: { 
 
     lat: 28.3280638, 
 
     lng: -81.4025985 
 
    }, 
 
    zoom: 15 
 
    }); 
 
    icon1 = { 
 
    url: "http://www.unisdr.org/campaign/resilientcities/assets/images/template/google-maps-blue-pin.png" 
 
    }; 
 
    icon2 = { 
 
    url: "http://www.unisdr.org/campaign/resilientcities/assets/images/template/google-maps-red-pin.png" 
 
    }; 
 
    var mk = NewMarker("<b>Charles~Cassandra</b><br/>Testor<br/> (407)870-0040", 28.3280638, -81.4025985, true); 
 
};
html, 
 
    body { 
 
    width: 100%; 
 
    height: 100px; 
 
    } 
 
    body { 
 
    margin-top: 0px; 
 
    margin-right: 0px; 
 
    margin-left: 0px; 
 
    margin-bottom: 0px; 
 
    } 
 
    #map { 
 
    height: 400px; 
 
    margin: 0; 
 
    padding: 0; 
 
    }
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?callback=initialize"> 
 
</script> 
 
<title>Google Maps</title> 
 
<div id="map" style="width: 600px; height: 400px"></div>

0

工作就像一個魅力!感謝geocodezip!也跟着鏈接到你的答案'無法讀取屬性'offsetWidth'null。我得到一個未捕獲的引用錯誤:當我添加addDOMListener時,google沒有被定義...我將它放在您的示例中關於offsetWidth爲空的相同位置。

<script type="text/javascript"> 
var map; 
var icon1,icon2; 

function GetMarker(csid, myLat, MyLong, premise) { 
    if (premise) { 
    var marker = new google.maps.Marker({position: {lat: 28.3280638, lng: -81.4025985}, label: csid, map: map, icon: icon1}); 
    } 
    else { 
    var marker = new google.maps.Marker({position: {lat: 28.3280638, lng: -81.4025985}, label: csid, map: map, icon: icon2}); 
    } 
} 

function NewMarker(Info, MyLat,MyLong, premise) { 
    var mk2 = GetMarker(Info, MyLat, MyLong, premise); 
}; 

function initialize() { 
    map = new google.maps.Map(document.getElementById("map"), {center: {lat:28.3280638, lng:-81.4025985}, zoom: 15}); 
    icon1 = {url:"http://www.unisdr.org/campaign/resilientcities/assets/images/template/google-maps-blue-pin.png"}; 
    icon2 = {url:"http://www.unisdr.org/campaign/resilientcities/assets/images/template/google-maps-red-pin.png"}; 
    var mk = NewMarker("<b>Charles~Cassandra</b><br/>Testor<br/> (407)870-0040",28.3280638 ,-81.4025985, true); 
}; 
google.maps.event.addDomListener(window, "load", initialize); 
</script> 
</head> 
<body> 
<script type="text/javascript" 
    src="https://maps.googleapis.com/maps/api/js?callback=initialize"> 
</script> 
<title>Google Maps</title> 
<div id="map" style="width: 100%; height: 100%"></div> 
</body> 
</html> 
+0

這不應該是一個答案。改爲向@geocodezip添加評論。 –

+0

@geocodezip:謝謝!地圖現在顯示在瀏覽器中,處理應用程序表單。 – Dennis