Question

我一直试图在地图上绘制一些随机坐标，并在地图上标记为...标记，onClick弹出infoWindow。但无济于事:(

地图显示为空。谁能告诉我哪里出错了？任何建议都很明显：）

我的HTML页面：

<html lang="en">
<head>
<title>Google Map</title>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
   <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  function initialize() {
  var myOptions = {
   zoom: 2,
    center: new google.maps.LatLng(23.241346, 18.281250),
     mapTypeId: google.maps.MapTypeId.ROADMAP
   }
   var map = new google.maps.Map(document.getElementById("map_canvas"),
                            myOptions);

   setMarkers(map, locations);
}


 var locations = [
   ['AU', -37.850565, 144.980289 , 4,"'<p>'233'</p>'"],
    ['AS', 48.1670845, 16.3465254, 5, "'<p>'233'</p>'"],
   ['BE', 50.8826906, 4.4570261, 3, "'<p>'233'</p>'"],
   ['BR', -23.5004937, -46.8482093, 2, "'<p>'233'</p>'"],
   ['CZ', 50.0878114, 14.4204598, 1, "'<p>'233'</p>'"],
   ['DM', 55.6710507, 12.4401635, 6, "'<p>'233'</p>'"],
   ['FI', 60.2101064, 24.8251788, 7, "'<p>'233'</p>'"],
   ['FR', 48.8744779, 2.1668675, 8, "'<p>'233'</p>'"],
   ['GE', 51.19423, 6.70568, 9, "'<p>'233'</p>'"],
   ['GR', 38.0433281, 23.797971, 10, "'<p>'233'</p>'"]
 ];

  function setMarkers(map, locations) {

  var image = new google.maps.MarkerImage('punaise.png',
      // This marker is 30 pixels wide by 30 pixels tall.
      new google.maps.Size(30, 30),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
       // The anchor for this image is the base of the flagpole at 0,32.
       new google.maps.Point(0, 32));
     var shadow = new google.maps.MarkerImage('schaduw.png',
      // The shadow image is larger in the horizontal dimension
       // while the position and offset are the same as for the main image.
       new google.maps.Size(30, 30),
       new google.maps.Point(0,0),
       new google.maps.Point(0, 32));
       // Shapes define the clickable region of the icon.
       // The type defines an HTML &lt;area&gt; element 'poly' which
       // traces out a polygon as a series of X,Y points. The final
       // coordinate closes the poly by connecting to the first
       // coordinate.
   var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'

   };
   for (var i = 0; i < locations.length; i++) {
    var entity = locations[i];
    var myLatLng = new google.maps.LatLng(entity[1], entity[2]);
    var marker = new google.maps.Marker({
         position: myLatLng,
        map: map,
        shadow: shadow,
        icon: image,
       shape: shape,
        title: entity[0],
        zIndex: entity[3],
    });
     infoWindow = new google.maps.InfoWindow({
         content: entity[4]
    });
 }
      google.maps.event.addListener(marker, "click", function () {

     if (currentInfoWindow) {
         currentInfoWindow.close();
     }
     infoWindow.open(gmap, marker);
     currentInfoWindow = infoWindow;
  });


 }

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

 <div id="map_canvas" style="width: 800px; height: 500px;"></div>


</body>
</html>

Answer 1

这就是您的代码应该如何：

（仅使用现有代码的相关部分）

LIVE DEMO

CODE：

var centr = new google.maps.LatLng(48.1670845, 16.3465254);
var locations = [
    ['AU', -37.850565, 144.980289, 4, "'<p>'233'</p>'"],
    ['AS', 48.1670845, 16.3465254, 5, "'<p>'233'</p>'"],
    ['BE', 50.8826906, 4.4570261, 3, "'<p>'233'</p>'"],
    ['BR', -23.5004937, -46.8482093, 2, "'<p>'233'</p>'"],
    ['CZ', 50.0878114, 14.4204598, 1, "'<p>'233'</p>'"],
    ['DM', 55.6710507, 12.4401635, 6, "'<p>'233'</p>'"],
    ['FI', 60.2101064, 24.8251788, 7, "'<p>'233'</p>'"],
    ['FR', 48.8744779, 2.1668675, 8, "'<p>'233'</p>'"],
    ['GE', 51.19423, 6.70568, 9, "'<p>'233'</p>'"],
    ['GR', 38.0433281, 23.797971, 10, "'<p>'233'</p>'"]
];

var map;
var infowindow; //global declaration for single instance of infowindow
function init() {
    var mapOptions = {
        zoom: 3,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: centr
    };
    map = new google.maps.Map(document.getElementById('map_canvas'),
    mapOptions);
    infowindow = new google.maps.InfoWindow();
    drop();
}

function drop() {
    for (var i = 0; i < locations.length; i++) {
        var entity = locations[i];
        var myLatLng = new google.maps.LatLng(entity[1], entity[2]);
        var mark = new google.maps.Marker({
            position: myLatLng,
            map: map,
        });
    iWindow(mark, entity[4]);
   }
}

function iWindow(marker, title) {
    google.maps.event.addListener(marker, 'click', function () {

        infowindow.setContent(title);
        infowindow.open(map, marker);
    });
}
window.onload = init;

用气球标记在地图上绘制坐标;信息窗口

1 个答案: