Fatal编程技术网
  • javascript/
  • Javascript 使用气球标记在地图上绘制坐标&；信息窗口

Javascript 使用气球标记在地图上绘制坐标&；信息窗口

javascript html google-maps google-maps-api-3

Javascript 使用气球标记在地图上绘制坐标&；信息窗口,javascript,html,google-maps,google-maps-api-3,google-maps-markers,Javascript,Html,Google Maps,Google Maps Api 3,Google Maps Markers,我一直在尝试在地图上绘制一些随机坐标，..在地图上显示为标记，然后单击弹出一个infoWindow。但没有用：( 地图上显示的是空的。有人能告诉我哪里出了问题吗？任何建议都是值得赞赏的：） 我的HTML页面： <html lang="en"> <head> <title>Google Map</title> <meta charset="utf-8"> <meta name="viewport" content="initial-

我一直在尝试在地图上绘制一些随机坐标，..在地图上显示为标记，然后单击弹出一个
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>


谷歌地图
函数初始化（）{
变量myOptions={
缩放：2，
中心：新google.maps.LatLng（23.24134618.281250），
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map（document.getElementById（“map_canvas”），
肌肽）；
设置标记（地图、位置）；
}
变量位置=[
[AU'，-37.850565144.980289,4，“'233'
”，
[AS'，48.1670845,16.3465254,5，“'233”
”，
[BE'，50.8826906，4.4570261，3，“'233”
”，
[BR'，-23.5004937，-46.8482093,2，“'233'
”，
[CZ'，50.0878114，14.4204598，1，“'233'
”，
[DM'，55.6710507,12.4401635,6，“'233'
”，
[FI'，60.2101064,24.8251788,7，“'233'
”，
[FR'，48.8744779，2.1668675，8，“'233'
”，
[GE'，51.19423,6.70568,9，“'233'
”，
[GR'，38.0433281,23.797971,10，“'233'
”]
];
功能设置标记（地图、位置）{
var image=new google.maps.MarkerImage（'punaise.png'，
//此标记宽30像素，高30像素。
新google.maps.Size（30,30），
//此图像的原点为0,0。
新google.maps.Point（0,0），
//此图像的锚定位于旗杆底部0,32处。
新的google.maps.Point（0,32））；
var shadow=new google.maps.MarkerImage（'schaduw.png'，
//阴影图像在水平维度上更大
//而位置和偏移量与主图像相同。
新google.maps.Size（30,30），
新google.maps.Point（0,0），
新的google.maps.Point（0,32））；
//形状定义图标的可单击区域。
//该类型定义了一个HTML区域元素“poly”，该元素
//将多边形绘制为一系列X、Y点。最终
//坐标通过连接到第一个多边形来关闭多边形
//协调。
变量形状={
坐标：[1,1,1,20,18,20,18,1]，
类型：“poly”
};
对于（变量i=0；i
您的代码应该是这样的：

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

代码：

var centr=new google.maps.LatLng（48.1670845,16.3465254）；
变量位置=[
[AU'，-37.850565144.980289,4，“'233'
”，
[AS'，48.1670845,16.3465254,5，“'233”
”，
[BE'，50.8826906，4.4570261，3，“'233”
”，
[BR'，-23.5004937，-46.8482093,2，“'233'
”，
[CZ'，50.0878114，14.4204598，1，“'233'
”，
[DM'，55.6710507,12.4401635,6，“'233'
”，
[FI'，60.2101064,24.8251788,7，“'233'
”，
[FR'，48.8744779，2.1668675，8，“'233'
”，
[GE'，51.19423,6.70568,9，“'233'
”，
[GR'，38.0433281,23.797971,10，“'233'
”]
];
var映射；
var信息窗口//infowindow单个实例的全局声明
函数init（）{
变量映射选项={
缩放：3，
mapTypeId:google.maps.mapTypeId.ROADMAP，
中心：中心
};
map=new google.maps.map（document.getElementById（'map_canvas'），
地图选项）；
infowindow=new google.maps.infowindow（）；
下降（）；
}
函数drop（）{
对于（变量i=0；i
：D但有一件事..当单击气球然后再次单击时..阴影会变厚，并且会启动多个信息窗口以单击同一标记：O 
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;