0

我正在使用 php sql 和 javascript 构建商店定位器。我已经完成了本教程https://developers.google.com/maps/articles/phpsqlsearch_v3并让它工作。我正在尝试在 infoWindows 上实现放大/缩小链接,以供用户单击标记时使用。它不起作用,在 FireFox 中,我在控制台中没有收到任何错误。在 Chrome 中我得到 Uncaught TypeError: Object # has no method 'setCenter'

我一直在搜索论坛,但一直无法找到解决方案。抱歉,我没有在线版本可供查看,在本地工作。下面是我正在使用的脚本。

var map  = null;
var markers = [];
var infoWindow;
var locationSelect;
//On page load Create a google map in #map
//Set default cordinates & Map style to roadmap
function load() {
var myOptions = {
  zoom: 8,
  center: new google.maps.LatLng(43.907787,-79.359741),
  mapTypeControl: true,
  mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
  navigationControl: true,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions); 
infoWindow = new google.maps.InfoWindow({ 
  size: new google.maps.Size(150,50)
});
locationSelect = document.getElementById("locationSelect");
locationSelect.onchange = function() {
  var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
  if (markerNum != "none") {
    google.maps.event.trigger(markers[markerNum], 'click');
  }
};
}

//Search for LAT/LNG of a place using its address using Google Maps Geocoder
 function searchLocations() {
  var address = document.getElementById("addressInput").value;
 var geocoder = new google.maps.Geocoder();
 geocoder.geocode({address: address}, function(results, status) {
   if (status == google.maps.GeocoderStatus.OK) {
    searchLocationsNear(results[0].geometry.location);
   } else {
     alert(address + ' not found');
   }
 });
}

//Clears Prve location, in info box
function clearLocations() {
 infoWindow.close();
 for (var i = 0; i < markers.length; i++) {
   markers[i].setMap(null);
 }
 markers.length = 0;
 locationSelect.innerHTML = "";
 var option = document.createElement("option");
 option.value = "none";
 option.innerHTML = "See all results:";
 locationSelect.appendChild(option);
}

 //Look for locations near by and loop through all data getting lat & lng of each marker
 function searchLocationsNear(center) {
 clearLocations();

 var radius = document.getElementById('radiusSelect').value;
 var searchUrl = 'http://localhost:8888/starward/wp-content/themes/starward/map_request.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
 downloadUrl(searchUrl, function(data) {
   var xml = parseXml(data);
   var markerNodes = xml.documentElement.getElementsByTagName("marker");
   var bounds = new google.maps.LatLngBounds();
   for (var i = 0; i < markerNodes.length; i++) {
     var name = markerNodes[i].getAttribute("name");
     var address = markerNodes[i].getAttribute("address");
     var distance = parseFloat(markerNodes[i].getAttribute("distance"));
     var zoom = 18;
     var latlng = new google.maps.LatLng(
          parseFloat(markerNodes[i].getAttribute("lat")),
          parseFloat(markerNodes[i].getAttribute("lng"))); 

     createOption(name, distance, i);
     createMarker(latlng, name, address,zoom);
     bounds.extend(latlng);
   }
   map.fitBounds(bounds);
   map.setZoom(11);
   // map.setCenter(center);
   locationSelect.style.visibility = "visible";
   locationSelect.onchange = function() {
     var markerNum = locationSelect.options[locationSelect.selectedIndex].value;
     google.maps.event.trigger(markers[markerNum], 'click');
   };
  });
}


//Creates marker on the map
//Adds event for user when they click address info pops up
function createMarker(latlng, name, address, zoom) {
  //var html = "<b>" + name + "</b> <br/>" + address 
  // add the zoom links
  var html =  "<b>" + name + "</b> <br/>" + address 
  html += '<br><a  href="javascript: map.setZoom('+zoom+');">Zoom To</a>';
  html += ' <a  href="javascript:map.setCenter(new google.maps.LatLng('+latlng.toUrlValue(6)+')); map.setZoom(parseInt(map.getZoom())+1);">[+]</a>';
  html += ' <a  href="javascript:map.setCenter(new google.maps.LatLng('+latlng.toUrlValue(6)+')); map.setZoom(parseInt(map.getZoom())-1);">[-]</a>';

  var marker = new google.maps.Marker({
    position: latlng,
    map: map
  });
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
  marker.MyZoom = zoom;
  markers.push(marker);
}

function createOption(name, distance, num) {
  var option = document.createElement("option");
  option.value = num;
  option.innerHTML = name + "(" + distance.toFixed(1) + ")";
  locationSelect.appendChild(option);
}
//Look up XML sheet to get data
function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      callback(request.responseText, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}

function parseXml(str) {
  if (window.ActiveXObject) {
    var doc = new ActiveXObject('Microsoft.XMLDOM');
    doc.loadXML(str);
    return doc;
  } else if (window.DOMParser) {
    return (new DOMParser).parseFromString(str, 'text/xml');
  }
}
4

1 回答 1

0

它适用于 IE 和 Firefox。尽管对我来说,如果我也为“ZoomTo”链接设置中心,这种行为会更有意义:

html += '<br><a  href="javascript: map.setCenter(new google.maps.LatLng('+latlng.toUrlValue(6)+'));map.setZoom('+zoom+');">Zoom To</a>';
于 2013-01-24T16:29:05.197 回答