更新的脚本 - 单击和缩放/居中
还是不太对,第一次点击显示 infoWindow put 不缩放/居中
// 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;
};
任何帮助将不胜感激。