在地圖上用氣球標記和信息窗口繪製座標

我一直試圖在地圖上繪製一些隨機座標，並在地圖上標記爲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>

來源

2013-02-07 beerBear

這是你的代碼應該是這樣：

（僅用於現有代碼的相關部分）

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;

來源

2013-02-07 08:03:42 Cdeez

：d但有一個thing..when點擊一個氣球，然後點擊again..the影子越來越厚，還有人發起了同一標記點擊多個信息窗口：o – beerBear

Tadaaa ..在這裏你去，看看更新的代碼和小提琴:) :) – Cdeez

Thanks..that做到了。 – beerBear

在地圖上用氣球標記和信息窗口繪製座標

回答

相關問題