كيفية استخدام خرائط جوجل API مع علامات متعددة على نفس الخريطة

Question

لدي البرنامج النصي التالي إلى استخدام خرائط جوجل API, كل شيء بخير, ولكن أنا بحاجة إلى إنشاء الخريطة التي لديها أكثر من علامة واحدة (البالون على شكل أيقونة تشير إلى شيء) و أحتاج إلى كل من تلك العلامات إلى نقطة على منطقة مختلفة من الخريطة (أيالإحداثيات مختلفة), كيف يمكن أن أفعل ذلك ؟

<script type="text/javascript">

         function load() {

        var map = new GMap2(document.getElementById("map"));
        var marker = new GMarker(new GLatLng(<%=coordinates%>));

        var html="<img src='simplemap_logo.jpg' width='20' height='20'/> " +
             "<%=maptitle%><br/>" +
             "<%=text%>";



        map.setCenter(new GLatLng(<%=coordinates%>), <%=zoom%>)
        map.setMapType(G_HYBRID_MAP);
        map.addOverlay(marker);
        map.addControl(new GLargeMapControl());
        map.addControl(new GScaleControl());
        map.addControl(new GMapTypeControl());


        marker.openInfoWindowHtml(html);
        }

        //]]>
        </script>

سؤال واحد, إذا كنت تمرير سيناريو النص متغير ، يتيح تقول شيئا مثل:

<script type="text/javascript">
<%=ScriptText%>
</script>

و <%=ScriptText%> سوف تكون سلسلة التي سوف بناء وتعيين قيمته إلى صديق أو العامة متغير يسمى ScriptText, سوف لا تزال تعمل و تعمل بشكل صحيح ؟ (أنا أفعل هذا السيناريو ديناميكية مختلفة عن كيفية بناء كسلسلة ، ويرجع ذلك إلى الأمية في javascripting ;P)

Answer 1

obeattie و جريجرز كلاهما على حق.بشكل عام, تحتاج إلى تخزين علامة المعلمات في نوع من مجموعة التي سوف تستخدم في وقت لاحق على الأقل مرتين:

1. عند إضافة تراكب الخريطة
2. عند إضافة إلى GLatLngBounds كائن إلى حساب مركز نقطة و مستوى التكبير

الصفيف أو علامات تبدو وكأنها مجموعة من الكائنات ، شيء من هذا القبيل:

var latlng1 = [
    new GLatLng( 48.1234, -120.1234 ),
    new GLatLng( 48.5678, -120.5678 ),
    new GLatLng( 48.9101, -120.9112 ),
    new GLatLng( 48.1121, -120.1314 ),
    new GLatLng( 48.3145, -120.1516 ),
    new GLatLng( 48.1617, -120.1718 ),
    new GLatLng( 48.1819, -120.1920 ),
    new GLatLng( 48.2021, -120.2122 )
];

رمز إضافة علامات تبدو شيئا من هذا القبيل:

  // assume that map1 is an instance of a GMap2 object

  // #0 -- google maps api requires us to call setCenter first before calling any other operation on the map
  map1.setCenter( new GLatLng( 0, 0 ), 0 );

  // #1 -- add markers
  for ( var i = 0; i < latlng1.length; i++ )
  {
    var marker = new GMarker( latlng1[ i ] );
    map1.addOverlay( marker );
  }

  // #2a -- calculate center
  var latlngbounds = new GLatLngBounds( );
  for ( var i = 0; i < latlng1.length; i++ )
  {
    latlngbounds.extend( latlng1[ i ] );
  }

  // #2b -- set center using the calculated values
  map1.setCenter( latlngbounds.getCenter( ), map1.getBoundsZoomLevel( latlngbounds ) );

أما بالنسبة لسؤالك حول استخدام البرنامج النصي من جانب الخادم داخل جافا سكريبت العميل ، نعم يمكنك مزجها معا.اذا حكمنا من خلال الوصف ، وأعتقد أن هذا هو ما تحتاج إلى القيام به:

<script type="text/javascript">
    var latlng1 = new Array( );
</script>
<script type="text/javascript">
    <%
        do until rs.eof
            %>
            latlng1.push( new GLatLng( parseFloat( '<%= rs( "Lat" ) %>' ), parseFloat( '<%= rs( "Lng" ) %>' ) ) );
            <%
            rs.movenext
        loop
    %>
</script>

لقد نشرت مقالا في: http://salman-w.blogspot.com/2009/03/zoom-to-fit-all-markers-polylines-or.html

Answer 2

وستحتاج إلى إنشاء GMarker للحصول على كل المكان الذي تريد وضع علامة على الخريطة. هناك وثائق جيدة جدا متاحة هنا لGMarkers.

لإنشاء GMarker، سترى من الوثائق التي تحتاج أولا إلى إنشاء GLatLng يمثل الموقع الذي تريد إسقاط علامة. هل لم يذكر يريد أي محتوى في بالون، لذلك أفترض انها مجرد علامة كنت بعد. في حالتك، فإن رمز ربما ننظر بشيء من هذا القبيل:

var markerCoords = [
    new GLatLng(<latitude>, <longitude>),
    new GLatLng(<latitude>, <longitude>),
    [...]
];

for (coord in markerCoords){
    map.addOverlay(new GMarker(coord));
};

وأنا متأكد من أنك ربما يمكن أن نقول بالضبط ما يحدث هنا، ولكن فقط في حالة، I إنشاء مجموعة من الأشياء GLatLng (هذا يمكن أن يكون من أي طول [ضمن حدود هاها])، ومن ثم تكرار أكثر من ذلك، مضيفا علامات على الخريطة للحصول على كل GLatLng المحددة في المصفوفة.

إذا كنت تخطط لخلق الكثير من علامات، عليك ربما تجد أنه من المفيد استخدام في مدير علامة ، والتي سوف تسريع تقديم الكثير من علامات في وقت واحد (من خلال عدم تقديم قبالة الشاشة علامات والتكثيف منها على الشاشة إذا كان هناك الكثير في منطقة واحدة من الشاشة) .

Answer 3

وobeattie الإجابة على سؤالك جيد جدا. ولكن من مثال التعليمات البرمجية، يبدو وكأنك تريد أيضا خريطة لتكبير إلى المنطقة التي تحتوي على علامات. للقيام بذلك مع علامات متعددة، يمكنك إنشاء GLatLngBounds أن قمت بتمديد لكل علامة. يمكنك ثم الحصول على المركز والتكبير التي تناسب لجمع الخاصة بك من علامات من الكائن الحدود.

و var markersBounds = GLatLngBounds(); var coord = null; for (coord in markerCoords){ coord = new GMarker(coord); map.addOverlay(); markersBounds.extend(coord); };

var markersCenter = markersBounds.getCenter();
var markersZoom = G_HYBRID_MAP.getBoundsZoomLevel(markersBounds);

map.setCenter(markersCenter, markersZoom);

و

وأنا لست متأكدا 100٪ عن G_HYBRID_MAP. getBoundsZoomLevel ، ولكن إذا كنت أتذكر بشكل صحيح، G_HYBRID_MAP هو مثيل <لأ href = "http://code.google.com/apis/maps/documentation/reference.html#GMapType" يختلط = "نوفولو noreferrer" > GMapType .

Answer 4

ولدي شيئا من هذا القبيل ولكن الأحداث لا يعمل. هل يمكنني إضافة المستمعين داخل منشئ الكائن؟

//Localization object onstructor
function Localization(width, height, description, img_source){
    this.point = new GLatLng(width, height);
    this.marker = new GMarker(this.point);
    this.description = description;
    this.img_source = img_source;
    GEvent.addListener(this.marker, "click", function(){marker.openInfoWindowHtml(this.description);});
}

//map localizations to show on map
var localizations = [
    new Localization( 52.9015797, 15.2602200, 'Poznań1', 'eye1' ),
    new Localization( 52.9025797, 15.1602200, 'Poznań2', 'eye2' ),
    new Localization( 52.9035797, 15.2702200, 'Poznań3', 'eye3' ),
    new Localization( 52.9045797, 15.2102200, 'Poznań4', 'eye4' ),
]

var map = new GMap2(document.getElementById("mapa"));
map.setCenter(localizations[3].point, 13);
map.setUIToDefault();


for(i=0; i < localizations.length; i++){
    localization=localizations[i];
    map.addOverlay(localization.marker);
    localization.marker.openInfoWindowHtml(localization.description);
}