Google Maps API и geoxml 3 - Увеличить до Placemark по щелчку/Центр Placemark на карте

-1

ОБНОВЛЕНО SCRIPT - с щелчком и масштабирования/центрGoogle Maps API и geoxml 3 - Увеличить до Placemark по щелчку/Центр Placemark на карте

Еще не совсем правильно, первый щелчок показывает InfoWindow пут не увеличить/центр

// When the window has finished loading create our google map below 
    google.maps.event.addDomListener(window, 'load', initialize); 

var geoXml = null; 
var geoXmlDoc = null; 
var map = null; 
var myLatLng = null; 
var myGeoXml3Zoom = false; 
var sidebarHtml = ""; 
var infowindow = null; 
var kmlLayer = null; 
var filename = "test.kml.xml"; 

    function initialize() { 
     myLatLng = new google.maps.LatLng(52.60426, 1.72764); 
     // these set the initial center and zoom for the map 
     // if it is not specified in the query string 
     var lat = 52.60426; 
     var lng = 1.72764; 
     var zoom = 16; 

     if (!isNaN(lat) && !isNaN(lng)) { 
     myLatLng = new google.maps.LatLng(lat, lng); 
     } 
       var myOptions = { 
        zoom: zoom, 
        center: myLatLng, 
        streetViewControl: false, 
        mapTypeControl: false, 
        zoomControl: true, 
        // How you would like to style the map. 
        // This is where you would paste any style found on Snazzy Maps. 
        styles: [{"featureType":"all","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"administrative.country","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"administrative.province","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"administrative.locality","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"administrative.neighborhood","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"administrative.land_parcel","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"landscape.man_made","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"landscape.natural","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"on"}]},{"featureType":"road.arterial","elementType":"labels.text","stylers":[{"visibility":"on"}]},{"featureType":"transit","elementType":"labels","stylers":[{"visibility":"off"}]}] 
        // zoom: 16, 
        // center: myLatlng, 
       }; 
       map = new google.maps.Map(document.getElementById("map"), 
         myOptions); 
       infowindow = new google.maps.InfoWindow({}); 

    geoXml = new geoXML3.parser({ 
        map: map, 
        infoWindow: infowindow, 
        singleInfoWindow: true, 
        zoom: myGeoXml3Zoom, 
        afterParse: useTheData 
       }); 
       geoXml.parse(filename); 
     }; 

function kmlClick(pm) { 
     if (geoXml.docs[0].placemarks[pm].marker.getMap()) { 
      google.maps.event.trigger(geoXml.docs[0].placemarks[pm].marker,"click"); 
     } else { 
      geoXmlDoc.placemarks[pm].marker.setMap(map); 
      google.maps.event.trigger(geoXmlDoc.placemarks[pm].marker,"click"); 
     } 

    google.maps.event.addListener(geoXml.docs[0].placemarks[pm].marker, "click", function (e) { 
     map.setZoom(19); 
     //infoWindow.open(map, marker); 

     map.panTo(geoXml.docs[0].placemarks[pm].marker.getPosition()); 
    }); 
} 

function showAll() { 
     map.setZoom(16); 
     map.panTo(myLatLng); 
} 

// == builds the sidebar == 

function makeSidebarEntry(i) { 
    var name = geoXmlDoc.placemarks[i].name; 
    if (!name || (name.length == 0)) name = "marker #"+i; 
    // alert(name); 
    sidebarHtml += '<tr id="row'+i+'"><td><img src='+geoXmlDoc.placemarks[i].style.href+' height="20" alt="icon" /></td><td><a href="javascript:kmlClick('+i+');">'+name+'</a></td></tr>'; 
} 

function makeSidebar() { 
    sidebarHtml = '<table><tr></tr>'; 
    var currentBounds = map.getBounds(); 
// if bounds not yet available, just use the empty bounds object; 
if (!currentBounds) currentBounds=new google.maps.LatLngBounds(); 
if (geoXmlDoc) { 
    for (var i=0; i<geoXmlDoc.placemarks.length; i++) { 
    if (geoXmlDoc.placemarks[i].marker) { 
     if (currentBounds.contains(geoXmlDoc.placemarks[i].marker.getPosition())) { 
     makeSidebarEntry(i); 
     } 
    } 
    } 
} 
    sidebarHtml += "</table>"; 
    document.getElementById("sidebar").innerHTML = sidebarHtml; 
} 

function useTheData(doc){ 
    var currentBounds = map.getBounds(); 
    if (!currentBounds) currentBounds=new google.maps.LatLngBounds(); 
    // Geodata handling goes here, using JSON properties of the doc object 
    sidebarHtml = '<table><tr></tr>'; 
// var sidebarHtml = '<table>'; 
    geoXmlDoc = doc[0]; 
    for (var i = 0; i < geoXmlDoc.placemarks.length; i++) { 
    // console.log(doc[0].markers[i].title); 
    var placemark = geoXmlDoc.placemarks[i]; 
    if (placemark.marker) { 
     if (currentBounds.contains(placemark.marker.getPosition())) { 
     makeSidebarEntry(i); 
     } 
    } 

/* doc[0].markers[i].setVisible(false); */ 
    } 
    sidebarHtml += "</table>"; 
    document.getElementById("sidebar").innerHTML = sidebarHtml; 
};

XML:

<?xml version='1.0' encoding='UTF-8'?> 
<kml xmlns='http://www.opengis.net/kml/2.2'> 
    <Document> 
     <name>Map</name> 
     <description></description> 
     <Folder> 
      <name>Points</name> 
      <Placemark> 
       <name>Placemark 1</name> 
       <description>Description</description> 
       <styleUrl>#icon-1239</styleUrl> 
       <Point> 
        <coordinates>1.7275818,52.6043317,0.0</coordinates> 
       </Point> 
      </Placemark> 
      <Placemark> 
       <name>Placemark 2</name> 
       <description>Description</description> 
       <styleUrl>#icon-1279</styleUrl> 
       <Point> 
        <coordinates>1.73041,52.60436,0.0</coordinates> 
       </Point> 
      </Placemark> 
     </Folder> 
     <Style id='icon-1239'> 
      <IconStyle> 
       <scale>1.1</scale> 
       <Icon> 
        <href>http://www.gstatic.com/mapspro/images/stock/1239-poi-civic.png</href> 
       </Icon> 
      </IconStyle> 
     </Style> 
     <Style id='icon-1279'> 
      <IconStyle> 
       <scale>1.1</scale> 
       <Icon> 
        <href>http://www.gstatic.com/mapspro/images/stock/1279-poi-library.png</href> 
       </Icon> 
      </IconStyle> 
     </Style> 
    </Document> 
</kml>

Привет я пытаюсь создать пользовательскую карту с помощью Google Maps API и geoxml3. Мне удалось настроить карту и добавить пользовательскую боковую панель со списком меток, загружаемых из внешнего файла KML.xml.

Я хочу, чтобы это так, когда вы нажимаете на метку на боковой панели, или на самой карте, карта будет автоцентр на метках, а также приближать.

Херес HTML и скрипт я так пока

HTML:

<head> 
    <title>Test Map</title> 
    <link rel="stylesheet" href="css/style.css" type="text/css"> 
</head> 

<body> 

    <div class="map"> 
     <div id="map"></div> 
     <div id="side_bar"> 
      <h3>Locations</h3> 
      <div id="sidebar"></div> 
      <p>*Click to show location on map</p> 
     </div> 
    </div> 

    <!-- Scripts --> 
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAWj4S3HGnCZ2ZzlRg4bfb4Z7HcpJ82tl8&"></script> 
    <script src="js/map.js"></script> 
    <script src="js/geoxml3.js"></script> 
    <!-- jQuery --> 
    <script src="js/jquery.js"></script> 

</body>

Сценарий:

// When the window has finished loading create our google map below 
    google.maps.event.addDomListener(window, 'load', initialize); 

var geoXml = null; 
var geoXmlDoc = null; 
var map = null; 
var myLatLng = null; 
var myGeoXml3Zoom = false; 
var sidebarHtml = ""; 
var infowindow = null; 
var kmlLayer = null; 
var filename = "test.kml.xml"; 

    function initialize() { 
     myLatLng = new google.maps.LatLng(52.60426, 1.72764); 
     // these set the initial center and zoom for the map 
     // if it is not specified in the query string 
     var lat = 52.60426; 
     var lng = 1.72764; 
     var zoom = 16; 

     if (!isNaN(lat) && !isNaN(lng)) { 
     myLatLng = new google.maps.LatLng(lat, lng); 
     } 
       var myOptions = { 
        zoom: zoom, 
        center: myLatLng, 
        streetViewControl: false, 
        mapTypeControl: false, 
        zoomControl: true, 
        // How you would like to style the map. 
        // This is where you would paste any style found on Snazzy Maps. 
        styles: [{"featureType":"all","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"administrative.country","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"administrative.province","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"administrative.locality","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"administrative.neighborhood","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"administrative.land_parcel","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"landscape.man_made","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"landscape.natural","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"on"}]},{"featureType":"road.arterial","elementType":"labels.text","stylers":[{"visibility":"on"}]},{"featureType":"transit","elementType":"labels","stylers":[{"visibility":"off"}]}] 
        // zoom: 16, 
        // center: myLatlng, 
       }; 
       map = new google.maps.Map(document.getElementById("map"), 
         myOptions); 
       infowindow = new google.maps.InfoWindow({}); 

    geoXml = new geoXML3.parser({ 
        map: map, 
        infoWindow: infowindow, 
        singleInfoWindow: true, 
        zoom: myGeoXml3Zoom, 
        afterParse: useTheData 
       }); 
       geoXml.parse(filename); 
     }; 

function kmlClick(pm) { 
    if (geoXml.docs[0].placemarks[pm].marker.getMap()) { 
     google.maps.event.trigger(geoXml.docs[0].placemarks[pm].marker,"click"); 
    } else { 
     geoXmlDoc.placemarks[pm].marker.setMap(map); 
     google.maps.event.trigger(geoXmlDoc.placemarks[pm].marker,"click"); 
    } 
} 

// == builds the sidebar == 

function makeSidebarEntry(i) { 
    var name = geoXmlDoc.placemarks[i].name; 
    if (!name || (name.length == 0)) name = "marker #"+i; 
    // alert(name); 
    sidebarHtml += '<tr id="row'+i+'"><td><img src='+geoXmlDoc.placemarks[i].style.href+' height="20" alt="icon" /></td><td><a href="javascript:kmlClick('+i+');">'+name+'</a></td></tr>'; 
} 

function makeSidebar() { 
    sidebarHtml = '<table><tr></tr>'; 
    var currentBounds = map.getBounds(); 
// if bounds not yet available, just use the empty bounds object; 
if (!currentBounds) currentBounds=new google.maps.LatLngBounds(); 
if (geoXmlDoc) { 
    for (var i=0; i<geoXmlDoc.placemarks.length; i++) { 
    if (geoXmlDoc.placemarks[i].marker) { 
     if (currentBounds.contains(geoXmlDoc.placemarks[i].marker.getPosition())) { 
     makeSidebarEntry(i); 
     } 
    } 
    } 
} 
    sidebarHtml += "</table>"; 
    document.getElementById("sidebar").innerHTML = sidebarHtml; 
} 

function useTheData(doc){ 
    var currentBounds = map.getBounds(); 
    if (!currentBounds) currentBounds=new google.maps.LatLngBounds(); 
    // Geodata handling goes here, using JSON properties of the doc object 
    sidebarHtml = '<table><tr></tr>'; 
// var sidebarHtml = '<table>'; 
    geoXmlDoc = doc[0]; 
    for (var i = 0; i < geoXmlDoc.placemarks.length; i++) { 
    // console.log(doc[0].markers[i].title); 
    var placemark = geoXmlDoc.placemarks[i]; 
    if (placemark.marker) { 
     if (currentBounds.contains(placemark.marker.getPosition())) { 
     makeSidebarEntry(i); 
     } 
    } 

/* doc[0].markers[i].setVisible(false); */ 
    } 
    sidebarHtml += "</table>"; 
    document.getElementById("sidebar").innerHTML = sidebarHtml; 
};

Любая помощь будет принята с благодарностью.

источник

2016-04-15 Nathan

Какую версию geoxml3 вы используете (polys или kmz branch)? Можете ли вы предоставить образец файла KML, который вы используете для тестирования? Это только маркеры? Или маркеры, полигоны, полилинии и т. Д.? – geocodezip

Я думаю, что это версия полисов, я добавил файл KML в свой оригинальный пост. Это будут только метки для заметок – Nathan

Что вы хотите изменить масштаб? – geocodezip

Чтобы центрировать карту на маркер щелкнули на боковой панели, добавить код сделать это в функцию, которая вызывается (kmlClick):

function kmlClick(pm) { 
    // center the map on the marker and change the zoom to 18 
    if (geoXml.docs[0].placemarks[pm].marker.getPosition){ 
    map.setCenter(geoXml.docs[0].placemarks[pm].marker.getPosition()); 
    map.setZoom(19); 
    } 

    if (geoXml.docs[0].placemarks[pm].marker.getMap()) { 
    // if map is not null (marker is on the map), trigger a click on it 
    google.maps.event.trigger(geoXml.docs[0].placemarks[pm].marker,"click"); 
    } else { 
    // if map is null (marker is not on the map), add it to the map, 
    // then trigger a click on it 
    geoXmlDoc.placemarks[pm].marker.setMap(map); 
    google.maps.event.trigger(geoXmlDoc.placemarks[pm].marker,"click"); 
    } 
}

Если вы хотите, чтобы центр и масштабирование при нажатии на маркер или щелчок запускается на боковой панели, поместите эту функциональность в маркер мыши слушателя. Один из способов сделать это w ульд бы добавить маркер щелчка слушателю маркеров в useTheData:

function useTheData(doc){ 
    var currentBounds = map.getBounds(); 
    if (!currentBounds) currentBounds=new google.maps.LatLngBounds(); 
    sidebarHtml = '<table><tr></tr>'; 
    geoXmlDoc = doc[0]; 
    for (var i = 0; i < geoXmlDoc.placemarks.length; i++) { 
    var placemark = geoXmlDoc.placemarks[i]; 
    if (placemark.marker) { 
     google.maps.event.addListener(placemark.marker,'click',function(evt) { 
     this.getMap().setCenter(this.getPosition()); 
     this.getMap().setZoom(19); 
     }); 
     if (currentBounds.contains(placemark.marker.getPosition())) { 
     makeSidebarEntry(i); 
     } 
    } 
    } 
    sidebarHtml += "</table>"; 
    document.getElementById("sidebar").innerHTML = sidebarHtml; 
};

proof of concept

фрагмент кода:

google.maps.event.addDomListener(window, 'load', initialize); 
 

 
var geoXml = null; 
 
var geoXmlDoc = null; 
 
var map = null; 
 
var myLatLng = null; 
 
var myGeoXml3Zoom = false; 
 
var sidebarHtml = ""; 
 
var infowindow = null; 
 
var kmlLayer = null; 
 
var filename = "kml/SO_20160415_placemarks.kml"; 
 

 
function initialize() { 
 
    myLatLng = new google.maps.LatLng(52.60426, 1.72764); 
 
    var lat = 52.60426; 
 
    var lng = 1.72764; 
 
    var zoom = 16; 
 

 
    if (!isNaN(lat) && !isNaN(lng)) { 
 
    myLatLng = new google.maps.LatLng(lat, lng); 
 
    } 
 
    var myOptions = { 
 
    zoom: zoom, 
 
    center: myLatLng, 
 
    streetViewControl: false, 
 
    mapTypeControl: false, 
 
    zoomControl: true 
 
    }; 
 
    map = new google.maps.Map(document.getElementById("map"), 
 
    myOptions); 
 
    infowindow = new google.maps.InfoWindow({}); 
 

 
    geoXml = new geoXML3.parser({ 
 
    map: map, 
 
    infoWindow: infowindow, 
 
    singleInfoWindow: true, 
 
    zoom: myGeoXml3Zoom, 
 
    afterParse: useTheData 
 
    }); 
 
    geoXml.parseKmlString(kmlStr); 
 
    google.maps.event.addListener(map, "bounds_changed", makeSidebar); 
 
    google.maps.event.addListener(map, "center_changed", makeSidebar); 
 
    google.maps.event.addListener(map, "zoom_changed", makeSidebar); 
 
    google.maps.event.addListenerOnce(map, "idle", makeSidebar); 
 
}; 
 

 
function kmlClick(pm) { 
 
    if (geoXml.docs[0].placemarks[pm].marker.getMap()) { 
 
    google.maps.event.trigger(geoXml.docs[0].placemarks[pm].marker, "click"); 
 
    } else { 
 
    geoXmlDoc.placemarks[pm].marker.setMap(map); 
 
    google.maps.event.trigger(geoXmlDoc.placemarks[pm].marker, "click"); 
 
    } 
 
} 
 

 
function showAll() { 
 
    map.setZoom(16); 
 
    map.panTo(myLatLng); 
 
} 
 

 
// == builds the sidebar == 
 
function makeSidebarEntry(i) { 
 
    var name = geoXmlDoc.placemarks[i].name; 
 
    if (!name || (name.length == 0)) name = "marker #" + i; 
 
    sidebarHtml += '<tr id="row' + i + '"><td><img src=' + geoXmlDoc.placemarks[i].style.href + ' height="20" alt="icon" /></td><td><a href="javascript:kmlClick(' + i + ');">' + name + '</a></td></tr>'; 
 
} 
 

 
function makeSidebar() { 
 
    sidebarHtml = '<table><tr></tr>'; 
 
    var currentBounds = map.getBounds(); 
 
    // if bounds not yet available, just use the empty bounds object; 
 
    if (!currentBounds) currentBounds = new google.maps.LatLngBounds(); 
 
    if (geoXmlDoc) { 
 
    for (var i = 0; i < geoXmlDoc.placemarks.length; i++) { 
 
     if (geoXmlDoc.placemarks[i].marker) { 
 
     if (currentBounds.contains(geoXmlDoc.placemarks[i].marker.getPosition())) { 
 
      makeSidebarEntry(i); 
 
     } 
 
     } 
 
    } 
 
    } 
 
    sidebarHtml += "</table>"; 
 
    document.getElementById("sidebar").innerHTML = sidebarHtml; 
 
} 
 

 
function useTheData(doc) { 
 
    var currentBounds = map.getBounds(); 
 
    if (!currentBounds) currentBounds = new google.maps.LatLngBounds(); 
 
    sidebarHtml = '<table><tr></tr>'; 
 
    geoXmlDoc = doc[0]; 
 
    for (var i = 0; i < geoXmlDoc.placemarks.length; i++) { 
 
    var placemark = geoXmlDoc.placemarks[i]; 
 
    if (placemark.marker) { 
 
     google.maps.event.addListener(placemark.marker, 'click', function(evt) { 
 
     this.getMap().setCenter(this.getPosition()); 
 
     this.getMap().setZoom(19); 
 
     }); 
 

 
     if (currentBounds.contains(placemark.marker.getPosition())) { 
 
     makeSidebarEntry(i); 
 
     } 
 
    } 
 
    } 
 
    sidebarHtml += "</table>"; 
 
    document.getElementById("sidebar").innerHTML = sidebarHtml; 
 
}; 
 

 
var kmlStr = "<?xml version='1.0' encoding='UTF-8'?><kml xmlns='http://www.opengis.net/kml/2.2'><Document><name>Map</name><description></description><Folder><name>Points</name><Placemark><name>Placemark 1</name><description>Description</description><styleUrl>#icon-1239</styleUrl><Point><coordinates>1.7275818,52.6043317,0.0</coordinates></Point></Placemark><Placemark><name>Placemark 2</name><description>Description</description><styleUrl>#icon-1279</styleUrl><Point><coordinates>1.73041,52.60436,0.0</coordinates></Point></Placemark></Folder><Style id='icon-1239'><IconStyle><scale>1.1</scale><Icon><href>http://www.gstatic.com/mapspro/images/stock/1239-poi-civic.png</href></Icon></IconStyle></Style><Style id='icon-1279'><IconStyle><scale>1.1</scale><Icon><href>http://www.gstatic.com/mapspro/images/stock/1279-poi-library.png</href></Icon></IconStyle></Style></Document></kml>";

html, 
 
body, 
 
#map, 
 
.map { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<script src="https://rawgit.com/geocodezip/geoxml3/master/polys/geoxml3.js"></script> 
 
<script src="http://maps.google.com/maps/api/js"></script> 
 
<div class="map"> 
 
    <div id="side_bar"> 
 
    <h3>Locations</h3> 
 
    <div id="sidebar"></div> 
 
    <p>*Click to show location on map</p> 
 
    </div> 
 
    <div id="map"></div> 
 
</div>

источник

2016-04-15 16:02:02 geocodezip

Спасибо, что это отлично работает для маркера, щелкнутого на боковой панели, есть способ, чтобы он работает одинаково для маркеров, которые находятся на самой карте? – Nathan

Несомненно. Простейшим было бы сделать центр и увеличить зрителя кликов, просто вызвать щелчок на боковой панели. – geocodezip

спасибо, что отлично работает сейчас! немного от темы, но есть ли все-таки изменить масштаб, чтобы он постепенно увеличивался, а не менялся прямо до 19? – Nathan

Test изменить функцию makeSidebar() как:

function makeSidebar() { 
    sidebarHtml = '<table><tr></tr>'; 
    var currentBounds = map.getBounds(); 
if (!currentBounds) currentBounds=new google.maps.LatLngBounds(); 
if (geoXmlDoc) { 
    for (var i=0; i<geoXmlDoc.placemarks.length; i++) { 
    if (geoXmlDoc.placemarks[i].marker) { 
    if (currentBounds.contains(geoXmlDoc.placemarks[i].marker.getPosition())) { 
    makeSidebarEntry(i); 

     google.maps.event.addListener(geoXmlDoc.placemarks[i].marker, "click", function (e) { 
      map.setZoom(16); 
      //infoWindow.open(map, marker); 

      map.setCenter(marker.getPosition()); 
     }); 
    } 
} 
    } 
}

источник

2016-04-15 11:11:18

Спасибо за ваш ответ, я пробовал это, но он не меняет зум при нажатии на метку или на боковой панели. – Nathan

Ссылки на боковой панели используют функцию javascript: kmlClick (i), если это вообще помогает? – Nathan

Попробуйте изменить вашу функцию Kmlclick как: –

Try изменить функцию Kmlclick как:

function kmlClick(pm) { 
    google.maps.event.addListener(geoXml.docs[0].placemarks[pm].marker, "click", function (e) { 
        map.setZoom(16); 
        //infoWindow.open(map, marker); 

        map.setCenter(marker.getPosition()); 
       }); 
     if (geoXml.docs[0].placemarks[pm].marker.getMap()) { 
      google.maps.event.trigger(geoXml.docs[0].placemarks[pm].marker,"click"); 
     } else { 
      geoXmlDoc.placemarks[pm].marker.setMap(map); 
      google.maps.event.trigger(geoXmlDoc.placemarks[pm].marker,"click"); 
     } 
    }

Approch, когда вы создаете свой след на карте необходимо добавить listner to it "click" i hop, который поможет вам

источник

2016-04-15 11:33:47

Приветствую вас, конечно, в правильном направлении! Незначительная проблема, когда вы нажимаете на Placemarker (на карте), он не приближается, однако, если я нажму на него, сделайте боковую панель. Странно, если я нажму на боковую панель, чтобы увеличить масштаб, я могу использовать знак места на карте для увеличения. Центрирование все еще не работает, карта перемещается, чтобы показать маркер места, но он находится на краю карты, может мы меняем это на центр карты? – Nathan

Я получаю ReferenceError: Не могу найти переменную: marker - ссылки на map.setCenter (marker.getPosition()); – Nathan

Мне удалось получить центрирование и масштабирование почти с помощью @BLD_Sys

function kmlClick(pm) { 
    google.maps.event.addListener(geoXml.docs[0].placemarks[pm].marker, "click", function (e) { 
        map.setZoom(19); 
        //infoWindow.open(map, marker); 

        map.panTo(geoXml.docs[0].placemarks[pm].marker.getPosition()); 
       }); 
     if (geoXml.docs[0].placemarks[pm].marker.getMap()) { 
      google.maps.event.trigger(geoXml.docs[0].placemarks[pm].marker,"click"); 
     } else { 
      geoXmlDoc.placemarks[pm].marker.setMap(map); 
      google.maps.event.trigger(geoXmlDoc.placemarks[pm].marker,"click"); 
     } 
    }

мне пришлось добавить geoXML.docs[0].placemarks[pm] немного, потому что он возвращает ссылку ошибки, используя только marker.getPosition()

Im все еще возникли проблемы с это только работает, если вы нажмете на боковую панель первой и, если нажать на метку на сначала карту.

источник

2016-04-15 12:19:17 Nathan

тест, чтобы переместить код после теста, как:

function kmlClick(pm) { 

      if (geoXml.docs[0].placemarks[pm].marker.getMap()) { 
       google.maps.event.trigger(geoXml.docs[0].placemarks[pm].marker,"click"); 
      } else { 
       geoXmlDoc.placemarks[pm].marker.setMap(map); 
       google.maps.event.trigger(geoXmlDoc.placemarks[pm].marker,"click"); 
      } 


     google.maps.event.addListener(geoXml.docs[0].placemarks[pm].marker, "click", function (e) { 
         map.setZoom(19); 
         //infoWindow.open(map, marker); 

         map.panTo(geoXml.docs[0].placemarks[pm].marker.getPosition()); 
        }); 
     }

Скажите мне, если он работает для вас и благодарю отметить голос в ответ.

источник

2016-04-15 13:59:02

Его еще не совсем верно, heres ссылка на живую версию [ссылка] (http://www.atecdesign.co.uk/Great%20Yarmouth%20-%20Tourist%20Map/test.html) Кажется, что там это класс, который не добавляется до тех пор, пока не будет нажата ссылка с боковой панели? – Nathan

Если вы можете опубликовать свой код после обновления для локализации, где находится проблема –

Ive обновил мое сообщение с текущим скриптом. Спасибо за вашу помощь до сих пор, ее закрытие не совсем верно! – Nathan

Я пытаюсь проверить этот код на своей машине, но у меня нет «test.kml.XML ", любым способом вы пытаетесь изменить функцию useTheData как:

function useTheData(doc){ 
    var currentBounds = map.getBounds(); 
    if (!currentBounds) currentBounds=new google.maps.LatLngBounds(); 
    // Geodata handling goes here, using JSON properties of the doc object 
    sidebarHtml = '<table><tr></tr>'; 
// var sidebarHtml = '<table>'; 
    geoXmlDoc = doc[0]; 
    for (var i = 0; i < geoXmlDoc.placemarks.length; i++) { 
    // console.log(doc[0].markers[i].title); 
    var placemark = geoXmlDoc.placemarks[i]; 
    if (placemark.marker) { 
     if (currentBounds.contains(placemark.marker.getPosition())) { 
     makeSidebarEntry(i); 
google.maps.event.addListener(placemark.marker, "click", function (e) { 
     map.setZoom(19); 
     //infoWindow.open(map, marker); 

     map.panTo(geoXml.docs[0].placemarks[pm].marker.getPosition()); 

     } 
    } 

/* doc[0].markers[i].setVisible(false); */ 
    } 
    sidebarHtml += "</table>"; 
    document.getElementById("sidebar").innerHTML = sidebarHtml; 
};

Я надеюсь, что это один является лучший

источник

2016-04-15 15:18:10

Используя вышеизложенное, я просто получаю пустой экран с боковой панелью (без заголовков маркеров). Я добавлю копию своего xml для тестирования. – Nathan

Google Maps API и geoxml 3 - Увеличить до Placemark по щелчку/Центр Placemark на карте

ответ

Смежные вопросы