Question

我已经为我的谷歌地图提供了两个不同的教程，一个用于从MySQL数据库运行地图，另一个用于为地图设置样式。

我在组合他们两个时遇到了麻烦，我对javascript没有太多经验......

我使用数据库的地图代码是：你可以看到这张地图here

<!DOC

TYPE 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>Intern Map</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=myapikey" type="text/javascript"></script>

<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map { height: 100% }
</style>


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

var iconStudent = new GIcon(); 
iconStudent.image = 'images/man.png';
iconStudent.shadow = 'images/man_shadow.png';
iconStudent.iconSize = new GSize(35, 60);
iconStudent.shadowSize = new GSize(60, 55);
iconStudent.iconAnchor = new GPoint(6, 30);
iconStudent.infoWindowAnchor = new GPoint(5, 1);

var iconAgency = new GIcon(); 
iconAgency.image = 'images/pin.png';
iconAgency.shadow = 'images/pin_shadow.png';
iconAgency.iconSize = new GSize(40, 40);
iconAgency.shadowSize = new GSize(60, 40);
iconAgency.iconAnchor = new GPoint(6, 20);
iconAgency.infoWindowAnchor = new GPoint(5, 1);

var customIcons = [];
customIcons["restaurant"] = iconStudent;
customIcons["bar"] = iconAgency;

function load() {
    if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map"));
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    map.setCenter(new GLatLng(40, 0), 3);
   // map.setCenter(new GLatLng(47.614495, 0), 3);

    GDownloadUrl("marker.php", 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 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, type);
        map.addOverlay(marker);
      }
    });
  }
}

function createMarker(point, name, address, type) {
  var marker = new GMarker(point, customIcons[type]);
  var html = "<b>" + name + "</b> <br/>" + address;
  GEvent.addListener(marker, 'click', function() {
    marker.openInfoWindowHtml(html);
  });
  return marker;
}



    //]]>
  </script>

  </head>

  <body onload="load()" onunload="GUnload()">
    <div id="map"></div>
  </body>

然后我有代码工作我想要的风格：你可以看到这一个here

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0; padding: 0 }
    #map_canvas { height: 100% }
</style>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
    function initialize() {
    var latlng = new google.maps.LatLng(40,0);
    var myOptions = {
    zoom: 3,
    center: latlng,
    panControl: false,
    panControlOptions: {
    position: google.maps.ControlPosition.RIGHT_TOP 
    },
    zoomControl: true,
    zoomControlOptions: {
    position: google.maps.ControlPosition.RIGHT_TOP
    },

    scaleControl: false,
    mapTypeId: google.maps.MapTypeId.SATELLITE
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);
    }
</script>

</head>
<body onload="initialize()">

<div id="map_canvas" style="width:100%; height:100%"></div>

</body>
</html>

任何人都可以帮我把两者结合起来，或指出我正确的方向。

提前致谢

alsweeet

Answer 1

第一个脚本使用 javascript api v2 ，第二个脚本使用 javascript api v3 。因此，不可能将两者结合起来。您应该从basics开始并在此处发布任何进一步的问题

设计谷歌地图 - Javascript

1 个答案: