KML overriding default view after loading

问题

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>

回答1:

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>

来源：https://stackoverflow.com/questions/35577895/kml-overriding-default-view-after-loading

标签

javascript

html

kml

geoxml3