KML 在加载后覆盖默认视图

KML overriding default view after loading

本文关键字：默认 视图 覆盖 加载 KML      更新时间：2023-09-26

我正在使用本地机器的geoxml3来加载kml。但是，加载 kml 后，默认视图中心将更改。我确实尝试添加行"保留视口：true"，但加载后我仍然可以看到 kml 的完整视图。任何阻止这种情况的建议。

这是我的代码

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

对于 geoxml3，相当于 preserveViewport 是 zoom 。将其设置为 true（默认值）可自动缩放以适合 KML，将其设置为 false 可禁用该功能。

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

代码片段：

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>

相关文章：