问题是让地图在google maps API v3上运行

时间：2014-11-17 21:45:56

标签： javascript xml google-maps google-maps-api-3 google-maps-api-2

我有一个问题是使用v3脚本来运行谷歌地图（v2）基本代码来自 geozip 。

你发现了这个问题吗？到目前为止，我认为我已经完成了谷歌Maps API v3所需的所有更改，但它不起作用。而且我还要说我是JavaScript新手

工作示例（v2）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxSPW5CJgpdgO_s4yyMovOaVh_KvvhSfpvagV18eOyDWu7VytS6Bi1CWxw"
  type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[

var iconBlue = new GIcon(); 
iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
iconBlue.iconSize = new GSize(26, 26);
iconBlue.iconAnchor = new GPoint(6, 20);
iconBlue.infoWindowAnchor = new GPoint(13, 0);

var iconRed = new GIcon(); 
iconRed.image = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
iconRed.iconSize = new GSize(26, 26);
iconRed.iconAnchor = new GPoint(6, 20);
iconRed.infoWindowAnchor = new GPoint(13, 0);

var customIcons = [];
customIcons["restaurant"] = iconBlue;
customIcons["bar"] = iconRed;
var markerGroups = { "restaurant": [], "bar": []};

function load() {
  if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(47.191560, 15.305113), 12);

    GDownloadUrl("markerdata.xml", function(data) {
      var xml = GXml.parse(data);
      var markers = xml.documentElement.getElementsByTagName("marker");
      for (var i = 0; i < markers.length; i++) {
        var name = markers[i].getAttribute("name");
        var address = markers[i].getAttribute("address");
        var tel = markers[i].getAttribute("tel");
        var href= '<a href="'+markers[i].getAttribute("href")+'" target="_blank">'+markers[i].getAttribute("web")+'</a>';
        var image = '<img src="'+markers[i].getAttribute("image")+'" width="250" height="187" alt=""/>';
        var type = markers[i].getAttribute("type");
        var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                parseFloat(markers[i].getAttribute("lng")));
        var marker = createMarker(point, name, address, tel, href, image, type);
        map.addOverlay(marker);
      }
    });
  }
}

function createMarker(point, name, address, href, tel, image, type) {
  var marker = new GMarker(point, customIcons[type]);
  markerGroups[type].push(marker);
  var html = "<font color='#008B00'><b>" + name + "</b></font> <br/>" + address + "<br><br>"  + href + "<br>"+ tel + "<br><br>"+ image;
  GEvent.addListener(marker, 'click', function() {
    marker.openInfoWindowHtml(html);
  });
  return marker;
}
function toggleGroup(type) {
  for (var i = 0; i < markerGroups[type].length; i++) {
    var marker = markerGroups[type][i];
    if (marker.isHidden()) {
      marker.show();
    } else {
      marker.hide();
    }
  } 
}
    //]]>
  </script>
  </head>
  <body style="font-family:Arial, sans serif" onload="load()" onunload="GUnload()">
    <div id="map" style="float:left; width: 600px; height: 600px; border: 1px solid black"></div>
    <div id="sidebar" style="float:left; width: 120px; height: 250px; border: 1px solid black">
   <input type="checkbox" id="restaurantCheckbox" onclick="toggleGroup('restaurant')" CHECKED />  
   Restaurants
   <br/>
   <input type="checkbox" id="barCheckbox" onclick="toggleGroup('bar')" CHECKED/>  
   Bars
    </div>
  </body>
</html>

不工作（v3）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>   

       <title>Google Maps JavaScript API Example</title>

    <script src=
"https://maps.googleapis.com/maps/api/js?v=3.17&amp;libraries=drawing,places,visualization"
    type="text/javascript"></script>


    <script type="text/javascript">
    //<![CDATA[



    var iconBlue = {
    url: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
    scaledSize: new google.maps.Size(26, 26),   
  };

var iconRed = {
    url: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
    scaledSize: new google.maps.Size(26, 26),   
  };

    var customIcons = [];
    customIcons["restaurant"] = iconBlue;
    customIcons["bar"] = iconRed;
    var markerGroups = { "restaurant": [], "bar": []};

       function initialize() {
            var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(47, 15)
      };
      map = new google.maps.Map(document.getElementById('map'),
          mapOptions);

        downloadUrl("markerdata.xml", function(doc) {
          var xmlDoc = xmlParse(doc); // var xml = xml.parse(doc);
          var markers = xmlDoc.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("name");
            var address = markers[i].getAttribute("address");
            var tel = markers[i].getAttribute("tel");
            var href= '<a href="'+markers[i].getAttribute("href")+'" target="_blank">'+markers[i].getAttribute("web")+'</a>';
            var image = '<img src="'+markers[i].getAttribute("image")+'" width="250" height="187" alt=""/>';
            var type = markers[i].getAttribute("type");
            var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
            var marker = createMarker(point, name, address, tel, href, image, type);
            marker.setMap(map);
          }
        });
      }


    function createMarker(point, name, address, href, tel, image, type) {
      var marker = new google.maps.marker(point, customIcons[type]);
      markerGroups[type].push(marker);
      var html = "<font color='#008B00'><b>" + name + "</b></font> <br/>" + address + "<br><br>"  + href + "<br>"+ tel + "<br><br>"+ image;
      google.maps.event.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }
    function toggleGroup(type) {
      for (var i = 0; i < markerGroups[type].length; i++) {
        var marker = markerGroups[type][i];
        if (marker.isHidden()) {
          marker.show();
        } else {
          marker.hide();
        }
      } 
    }

        google.maps.event.addDomListener(window, 'load', initialize);
        //]]>
      </script>
      </head>
      <body style="font-family:Arial, sans serif" onload="load()" onunload="GUnload()">
        <div id="map" style="float:left; width: 600px; height: 600px; border: 1px solid black"></div>
        <div id="sidebar" style="float:left; width: 120px; height: 250px; border: 1px solid black">
       <input type="checkbox" id="restaurantCheckbox" onclick="toggleGroup('restaurant')" CHECKED />  

           Restaurants
           <br/>

       <input type="checkbox" id="barCheckbox" onclick="toggleGroup('bar')" CHECKED/>  
       Bars
        </div>
      </body>
    </html>

1 个答案:

答案 0 :(得分：2)

我修改了你的代码，现在它对我来说很有效。

var imageGasthaus = {
    url: 'image/gasthaus.png',
    scaledSize: new google.maps.Size(26, 26),   
  };     
  var imageBar = {
    url: 'image/arzt.png',
    scaledSize: new google.maps.Size(26, 26),   
  };
      var customIcons = [];
    customIcons["restaurant"] = imageGasthaus;
    customIcons["bar"] = imageBar;
    var markerGroups = { "restaurant": [], "bar": []};

     function createMarker(point, name, address, href, tel, image, type) {
      var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: customIcons[type],
        zIndex: Math.round(latlng.lat()*-100000)<<5
        })

      markerGroups[type].push(marker);
      var html = "<font color='#008B00'><b>" + name + "</b></font> <br/>" + address + "<br><br>"  + href + "<br>"+ tel + "<br><br>"+ image;
      google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker, html);
      });
      return marker;
    }

    function initialize() {

var myOptions = {
    zoom: 8,
    center: new google.maps.LatLng(47,15),
    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);

downloadUrl("markerdata.xml", function(doc) {
        var xmlDoc = xmlParse(doc);
        var markers = xmlDoc.documentElement.getElementsByTagName("marker");

          for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("name");
            var address = markers[i].getAttribute("address");
            var tel = markers[i].getAttribute("tel");
            var href= '<a href="'+markers[i].getAttribute("href")+'" target="_blank">'+markers[i].getAttribute("web")+'</a>';
            var image = '<img src="'+markers[i].getAttribute("image")+'" width="250" height="187" alt=""/>';
            var type = markers[i].getAttribute("type");
             point = new google.maps.Lat.Lng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));

            var marker = createMarker(point, name, address, tel, href, image, type);

          }
        });
      }



    function toggleGroup(type) {
      for (var i = 0; i < markerGroups[type].length; i++) {
        var marker = markerGroups[type][i];
        if (marker.isHidden()) {
          marker.show();
        } else {
          marker.hide();
        }
      } 
    }