Google Maps v3 API MarkerCluster - 需要将动态 addMarkers 包装在标记变量中

发布于 2024-12-29 20:14:49 字数 3445 浏览 0 评论 0原文

我有一个 v3 谷歌地图,可以很好地处理动态标记,但我正在尝试添加 MarkerCluster 功能,如谷歌文档中详细说明的: http://google-maps-utility -library-v3.googlecode.com/svn/trunk/markerclusterer/docs/examples.html

<script type="text/javascript">

 var center = null;
var image = new google.maps.MarkerImage(
'combined.png',
 new google.maps.Size(31,25),
 new google.maps.Point(0,0),
 new google.maps.Point(16,25)
);


        var map = null;
        var currentPopup;
        var bounds = new google.maps.LatLngBounds();
        function addMarker(lat, lng, info) {
            var pt = new google.maps.LatLng(lat, lng);
            bounds.extend(pt);
            var marker = new google.maps.Marker({
                position: pt,
               icon: image,
                map: map
            });
            var popup = new google.maps.InfoWindow({
                content: info,
                maxWidth: 300
            });
            google.maps.event.addListener(marker, "click", function() {
                if (currentPopup != null) {
                    currentPopup.close();
                    currentPopup = null;
                }
                popup.open(map, marker);
                currentPopup = popup;
            });
            google.maps.event.addListener(popup, "closeclick", function() {
               // map.panTo(center);
                currentPopup = null;
            });
        }
        function initMap() {
            map = new google.maps.Map(document.getElementById("map"),  {
                center: new google.maps.LatLng(0, 0),
                zoom: 4,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: true,
                mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
                },
                navigationControl: true,
                navigationControlOptions: {
                 style: google.maps.NavigationControlStyle.DEFAULT
                }

            });





var mcOptions = {gridSize: 50, maxZoom: 15};
var markers = [];
<?php
do {
$name=$row_rsCity['PARKNAME']; 
$lat=$row_rsCity['lat'];
$lon=$row_rsCity['lng'];
$desc=$row_rsCity['PARKADDR'];
$city=$row_rsCity['PARKCITY'];
$spaces=$row_rsCity['SPACE_CNT'];
$phone=$row_rsCity['PHONE'];
echo ("addMarker($lat, $lon,'<b>$name</b><br/>$desc<br/>$city , CA<br /><br />Phone:     $phone <br />Space Count: $spaces');\n");
} while ($row_rsCity = mysql_fetch_assoc($rsCity));
?>
var mc = new MarkerClusterer(map, markers, mcOptions);
center = bounds.getCenter();
map.fitBounds(bounds);

}
</script>

我相信关键是包装 varmarkers = [];在 addMarkers 周围,但是当我执行此

示例时:

var markers = [
<?php
do {
$name=$row_rsCity['PARKNAME']; 
$lat=$row_rsCity['lat'];
$lon=$row_rsCity['lng'];
$desc=$row_rsCity['PARKADDR'];
$city=$row_rsCity['PARKCITY'];
$spaces=$row_rsCity['SPACE_CNT'];
$phone=$row_rsCity['PHONE'];
echo ("addMarker($lat, $lon,'<b>$name</b><br/>$desc<br/>$city , CA<br /><br />Phone:     $phone <br />Space Count: $spaces');\n");
} while ($row_rsCity = mysql_fetch_assoc($rsCity));
?>];

Firebug 返回以下错误:

missing ] after element list

任何人都可以帮助使用正确的语法吗?

I have a v3 Google Maps working fine with dynamic markers but I am trying to add the MarkerCluster feature as detailed in the google docs:
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/examples.html

<script type="text/javascript">

 var center = null;
var image = new google.maps.MarkerImage(
'combined.png',
 new google.maps.Size(31,25),
 new google.maps.Point(0,0),
 new google.maps.Point(16,25)
);


        var map = null;
        var currentPopup;
        var bounds = new google.maps.LatLngBounds();
        function addMarker(lat, lng, info) {
            var pt = new google.maps.LatLng(lat, lng);
            bounds.extend(pt);
            var marker = new google.maps.Marker({
                position: pt,
               icon: image,
                map: map
            });
            var popup = new google.maps.InfoWindow({
                content: info,
                maxWidth: 300
            });
            google.maps.event.addListener(marker, "click", function() {
                if (currentPopup != null) {
                    currentPopup.close();
                    currentPopup = null;
                }
                popup.open(map, marker);
                currentPopup = popup;
            });
            google.maps.event.addListener(popup, "closeclick", function() {
               // map.panTo(center);
                currentPopup = null;
            });
        }
        function initMap() {
            map = new google.maps.Map(document.getElementById("map"),  {
                center: new google.maps.LatLng(0, 0),
                zoom: 4,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: true,
                mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
                },
                navigationControl: true,
                navigationControlOptions: {
                 style: google.maps.NavigationControlStyle.DEFAULT
                }

            });





var mcOptions = {gridSize: 50, maxZoom: 15};
var markers = [];
<?php
do {
$name=$row_rsCity['PARKNAME']; 
$lat=$row_rsCity['lat'];
$lon=$row_rsCity['lng'];
$desc=$row_rsCity['PARKADDR'];
$city=$row_rsCity['PARKCITY'];
$spaces=$row_rsCity['SPACE_CNT'];
$phone=$row_rsCity['PHONE'];
echo ("addMarker($lat, $lon,'<b>$name</b><br/>$desc<br/>$city , CA<br /><br />Phone:     $phone <br />Space Count: $spaces');\n");
} while ($row_rsCity = mysql_fetch_assoc($rsCity));
?>
var mc = new MarkerClusterer(map, markers, mcOptions);
center = bounds.getCenter();
map.fitBounds(bounds);

}
</script>

I believe the key is wrapping the var markers = []; around the addMarkers but when I do this

Example :

var markers = [
<?php
do {
$name=$row_rsCity['PARKNAME']; 
$lat=$row_rsCity['lat'];
$lon=$row_rsCity['lng'];
$desc=$row_rsCity['PARKADDR'];
$city=$row_rsCity['PARKCITY'];
$spaces=$row_rsCity['SPACE_CNT'];
$phone=$row_rsCity['PHONE'];
echo ("addMarker($lat, $lon,'<b>$name</b><br/>$desc<br/>$city , CA<br /><br />Phone:     $phone <br />Space Count: $spaces');\n");
} while ($row_rsCity = mysql_fetch_assoc($rsCity));
?>];

Firebug returns the following error:

missing ] after element list

Can anyone help with the proper syntax ?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

妄想挽回 2025-01-05 20:14:49

更新您的 addMarker 函数以返回标记并接受地图作为参数:

function addMarker(map, lat, lng, info) {
  var pt = new google.maps.LatLng(lat, lng);
  bounds.extend(pt);
  var marker = new google.maps.Marker({
    position: pt,
    icon: image,
    map: map
  });
  var popup = new google.maps.InfoWindow({
    content: info,
    maxWidth: 300
  });
  google.maps.event.addListener(marker, "click", function() {
    if (currentPopup != null) {
      currentPopup.close();
      currentPopup = null;
    }
    popup.open(map, marker);
    currentPopup = popup;
  });
  google.maps.event.addListener(popup, "closeclick", function() {
    currentPopup = null;
  });

  return marker;
}

然后将标记创建部分更新为:

var mcOptions = {gridSize: 50, maxZoom: 15};
var markers = [];
<?php
do {
  $name=$row_rsCity['PARKNAME']; 
  $lat=$row_rsCity['lat'];
  $lon=$row_rsCity['lng'];
  $desc=$row_rsCity['PARKADDR'];
  $city=$row_rsCity['PARKCITY'];
  $spaces=$row_rsCity['SPACE_CNT'];
  $phone=$row_rsCity['PHONE'];
  echo ("markers.push(addMarker(map, $lat, $lon,'<b>$name</b><br/>$desc<br/>$city CA<br /><br />Phone: $phone <br />Space Count: $spaces'));\n");
} while ($row_rsCity = mysql_fetch_assoc($rsCity));
?>
var mc = new MarkerClusterer(map, markers, mcOptions);

Update your addMarker function to return the marker and accept map as a param:

function addMarker(map, lat, lng, info) {
  var pt = new google.maps.LatLng(lat, lng);
  bounds.extend(pt);
  var marker = new google.maps.Marker({
    position: pt,
    icon: image,
    map: map
  });
  var popup = new google.maps.InfoWindow({
    content: info,
    maxWidth: 300
  });
  google.maps.event.addListener(marker, "click", function() {
    if (currentPopup != null) {
      currentPopup.close();
      currentPopup = null;
    }
    popup.open(map, marker);
    currentPopup = popup;
  });
  google.maps.event.addListener(popup, "closeclick", function() {
    currentPopup = null;
  });

  return marker;
}

then update the marker creation section to be:

var mcOptions = {gridSize: 50, maxZoom: 15};
var markers = [];
<?php
do {
  $name=$row_rsCity['PARKNAME']; 
  $lat=$row_rsCity['lat'];
  $lon=$row_rsCity['lng'];
  $desc=$row_rsCity['PARKADDR'];
  $city=$row_rsCity['PARKCITY'];
  $spaces=$row_rsCity['SPACE_CNT'];
  $phone=$row_rsCity['PHONE'];
  echo ("markers.push(addMarker(map, $lat, $lon,'<b>$name</b><br/>$desc<br/>$city CA<br /><br />Phone: $phone <br />Space Count: $spaces'));\n");
} while ($row_rsCity = mysql_fetch_assoc($rsCity));
?>
var mc = new MarkerClusterer(map, markers, mcOptions);
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文