加载后KML覆盖默认视图 [英] KML overriding default view after loading
本文介绍了加载后KML覆盖默认视图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用本地机器上的geoxml3加载kml。但是，一旦加载kml，默认视图中心就会更改。我尝试添加一行preserveViewport：true，但仍然可以在加载完成后查看kml的完整视图。任何建议，以阻止此事。
这是我的代码
< ; HTML>
< head>
< title> Google地图< / title>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no>
< meta charset =utf-8>
< style>
html，body，#map {
margin：0;
padding：0;
身高：100％;
}
< / style>
< script src =http://code.jquery.com/jquery-1.10.1.min.js>< / script>
< script src =https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false>< / script>
< script type =text / javascriptsrc =geoxml3-master / polys / geoxml3.js>< / script>
< script type =text / javascriptsrc =geoxml3-master / ProjectedOverlay.js>< / script>
< script>
var myCenter = new google.maps.LatLng（13.751768，100.537606）;
var map;
var marker;
var mapProp;
函数initialize（）
{
mapProp = {
center：myCenter，
zoom：17，
mapTypeId：google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map（document.getElementById（map），mapProp）;
$ b var parser = new geoXML3.parser（{
suppressInfoWindows：true，
map：map，
preserveViewport：true
}） ;
parser.parse（'test.kml'）;
google.maps.event.addDomListener（window，'load'，initialize）;
< / script>
< / head>
< body>
< div style =height：100％; width：100％;>
< div id =map>< / div>
< / div>
< / body>
解决方案
对于geoxml3，相当于 preserveViewport 是缩放。将其设置为true（默认值）以自动缩放以适应KML，将其设置为false以禁用该功能。
var myCenter = new google.maps.LatLng（13.751768，100.537606）;
var map;
var marker;
var mapProp;
函数initialize（）{
mapProp = {
center：myCenter，
zoom：17，
mapTypeId：google.maps.MapTypeId.ROADMAP
} ;
map = new google.maps.Map（document.getElementById（map），mapProp）;
var parser = new geoXML3.parser（{
suppressInfoWindows：true，
map：map，
zoom：false
}）;
parser.parse（'test.kml'）;
}
google.maps.event.addDomListener（window，'load'，initialize）;
程式码片段：
var myCenter = new google.maps.LatLng（13.751768，100.537606）; var map; var marker; var mapProp; function initialize（）{mapProp = {center：myCenter，zoom：5， mapTypeId：google.maps.MapTypeId.ROADMAP}; map = new google.maps.Map（document.getElementById（map），mapProp）; var parser = new geoXML3.parser（{suppressInfoWindows：true，map：map，zoom：false}）; parser.parseKmlString（testKML）;} google.maps.event.addDomListener（window，load，initialize）; var testKML ='<？xml version =1.0encoding =UTF-8？>< kml xmlns =http://www.opengis.net/kml/2.2>< Document>< Style id =yellow_pin>< IconStyle>< scale> 1.1< / scale><图标>< href> http：//maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png< / href>< /图标>< hotSpot x =20y =2xunits =pixelsyunits =pixels/>< / IconStyle>< / Style>< Style id =arrow_reverse>< IconStyle>< scale> 1.1< / scale><图标> < href> http：//maps.google.com/mapfiles/kml/shapes/arrow-reverse.png< / href>< / Icon>< hotSpot x =54y =42xunits =像素yunits =像素/>< / IconStyle>< / Style>< Style id =marker_A>< IconStyle>< scale> 1.1< / scale><图标>< href> http：//maps.google.com/mapfiles/kml/paddle/A.png< / href>< / Icon>< hotSpot x =32y =1xunits =pixelsyunit s =像素/>< / IconStyle>< / Style>< Placemark>< styleUrl>＃yellow_pin< / styleUrl>< name><！[CDATA [marker 1]]>< < / description>< description><！[CDATA [description 1]]>< / description>< Point>< extrude> 1< / extrude>< 107.666015625,12.81152174509788,0< / coordinates>< / Point>< / Placemark>< Placemark>< styleUrl>＃arrow_reverse< / styleUrl>< name><！[CDATA [marker 2]]< < / description>< description><！[CDATA [description 2]]>< / description>< Point>< extrude> 1< / extrude>< altitudeMode> relativeToGround< / altitudeMode>< coordinates> ; 100.0634765625,4.402391829093915,0< / coordinates>< / Point>< / Placemark>< Placemark>< styleUrl>＃marker_A< / styleUrl>< name><！[CDATA [marker 3]]> < / name>< description><！[CDATA [description 3]]>< / descript离子><点和GT;<挤出→1< /挤压>< altitudeMode> relativeToGround< / altitudeMode><坐标> 99.5361328125,11.64007838467894,0< /坐标>< /点>< /标><标> ;< name>< [CDATA [marker 4]]>< / name>< description><！[CDATA [description 4]]>< / description>< Point>< extrude> 1 LT; /挤压>< altitudeMode> relativeToGround< / altitudeMode><坐标> 105.556640625,38.65119833229951,0< /坐标>< /点>< /标><标><名称><！[ CDATA [标记5]]< /名称><描述><！[CDATA [描述5]]>< / description>< Point>< ; relativeToGround< / altitudeMode><坐标> -93.1201171875,42.032974332441405,0< /坐标>< /点>< /标>< /文档与GT;< / KML>';
html，body，＃map {height：100％;宽度：100％; margin：0px; < script src =https：// < div id =map>< / div>
I am using geoxml3 from local machine to load kml. However the default view center is changing once kml is loaded. I did try adding line "preserveViewport: true" but still I get full view of kml after loading. any suggestion to stop this.
Here is my code
<html>
<head>
<title>Google Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript" src="geoxml3-master/polys/geoxml3.js"></script>
<script type="text/javascript" src="geoxml3-master/ProjectedOverlay.js"></script>
<script>
var myCenter=new google.maps.LatLng( 13.751768, 100.537606);
var map;
var marker;
var mapProp;
function initialize()
{
mapProp = {
center:myCenter,
zoom:17,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map=new google.maps.Map(document.getElementById("map"),mapProp);
var parser = new geoXML3.parser({
suppressInfoWindows: true,
map: map,
preserveViewport: true
});
parser.parse('test.kml');
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div style="height:100%; width:100%;">
<div id="map"></div>
</div>
</body>
解决方案
For geoxml3, the equivalent of preserveViewport is zoom. Set it to true (the default) to automatically zoom to fit the KML, set it to false to disable that functionality.
var myCenter=new google.maps.LatLng( 13.751768, 100.537606);
var map;
var marker;
var mapProp;
function initialize() {
mapProp = {
center:myCenter,
zoom:17,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map=new google.maps.Map(document.getElementById("map"),mapProp);
var parser = new geoXML3.parser({
suppressInfoWindows: true,
map: map,
zoom: false
});
parser.parse('test.kml');
}
google.maps.event.addDomListener(window, 'load', initialize);
code snippet:
var myCenter = new google.maps.LatLng(13.751768, 100.537606);
var map;
var marker;
var mapProp;
function initialize() {
mapProp = {
center: myCenter,
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), mapProp);
var parser = new geoXML3.parser({
suppressInfoWindows: true,
map: map,
zoom: false
});
parser.parseKmlString(testKML);
}
google.maps.event.addDomListener(window, "load", initialize);
var testKML = '<?xml version="1.0" encoding="UTF-8" ?><kml xmlns="http://www.opengis.net/kml/2.2"><Document><Style id="yellow_pin"><IconStyle><scale>1.1</scale><Icon><href>http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png</href></Icon><hotSpot x="20" y="2" xunits="pixels" yunits="pixels"/></IconStyle></Style><Style id="arrow_reverse"><IconStyle><scale>1.1</scale><Icon><href>http://maps.google.com/mapfiles/kml/shapes/arrow-reverse.png</href></Icon><hotSpot x="54" y="42" xunits="pixels" yunits="pixels"/></IconStyle></Style><Style id="marker_A"><IconStyle><scale>1.1</scale><Icon><href>http://maps.google.com/mapfiles/kml/paddle/A.png</href></Icon><hotSpot x="32" y="1" xunits="pixels" yunits="pixels"/></IconStyle></Style><Placemark><styleUrl>#yellow_pin</styleUrl><name><![CDATA[marker 1]]></name><description><![CDATA[description 1]]></description><Point><extrude>1</extrude><altitudeMode>relativeToGround</altitudeMode><coordinates>107.666015625,12.81152174509788,0</coordinates></Point></Placemark><Placemark><styleUrl>#arrow_reverse</styleUrl><name><![CDATA[marker 2]]></name><description><![CDATA[description 2]]></description><Point><extrude>1</extrude><altitudeMode>relativeToGround</altitudeMode><coordinates>100.0634765625,4.402391829093915,0</coordinates></Point></Placemark><Placemark><styleUrl>#marker_A</styleUrl><name><![CDATA[marker 3]]></name><description><![CDATA[description 3]]></description><Point><extrude>1</extrude><altitudeMode>relativeToGround</altitudeMode><coordinates>99.5361328125,11.64007838467894,0</coordinates></Point></Placemark><Placemark><name><![CDATA[marker 4]]></name><description><![CDATA[description 4]]></description><Point><extrude>1</extrude><altitudeMode>relativeToGround</altitudeMode><coordinates>105.556640625,38.65119833229951,0</coordinates></Point></Placemark><Placemark><name><![CDATA[marker 5]]></name><description><![CDATA[description 5]]></description><Point><extrude>1</extrude><altitudeMode>relativeToGround</altitudeMode><coordinates>-93.1201171875,42.032974332441405,0</coordinates></Point></Placemark></Document></kml>';
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<div id="map"></div>
这篇关于加载后KML覆盖默认视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
