1

私はインドの地図を使用しています.緯度と経度の定義に従って地図上にマーカーを表示しています.しかし、今は地図上に複数のマーカーを表示する必要があります.それについてはわかりません.助けてください. .

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <script type="text/javascript" src="http://apis.mapmyindia.com/v2.0/mapApi /licKey=4d29cecd1c6f9f97247b82e18b637093&platform=aspx"></script>
<title>MapmyIndia Maps</title>
 </head>
 <body style="font-family:Verdana,Arial,sans-serif; font-size:12px; line-height:1.2em;">
<div id="MapDiv" style="width: 500px; height: 300px;">
</div>

<script type="text/javascript">

var _X = '76.652826';

var _Y = '10.78716';
var pt = new Point(_X, _Y);

    $().ready(function () {
        var map = $("#MapDiv");
        map.MireoMap();
        map.MireoMap("addMarker", HTMLHelper.mapMarker("https://d2t1xqejof9utc.cloudfront.net/screenshots/pics/81591c98d66921ed45c6fbab36601942/medium.png", 100, 100), pt);

    })

   </script>

  </body>
 </html>

単一のマップ プロット用のこのコード。マップ上に複数のマーカーを表示したい。参照用の URL をいくつか提供します。

http://www.mapmyindia.com/api/

http://maps.mapmyindia.com/

4

3 に答える 3

0 
    <!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple markers</title>
    <style>
        html, body, #map-canvas
        {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
    <script>
        var map_infoBox = new InfoBox({
            content: '@', maxWidth: 0, isHidden: false, pixelOffset: new google.maps.Size(-161, -230),
            zIndex: null, boxClass: 'infobox', closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
            , infoBoxClearance: new google.maps.Size(1, 1)
        });


        function initialize() {
            var map_MyOptions = { zoom: 5, center: new google.maps.LatLng(26.216667, 50.583333),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map-locator-pin'), map_MyOptions);
            for (var i =1 ; i < 10; i++) {
                var lat = 26.216667 + i;  //add your latitude value
                var long = 50.583333; //add your longtitude value
                var myLatLng = new google.maps.LatLng(lat, long);
                marker = new google.maps.Marker({ position: myLatLng, map: map });
                google.maps.event.addListener(marker, 'click',
                                                        function () {
                                                            map_infoBox.setContent("<h1> Hello Title " + i + "</h1>");
                                                            map_infoBox.open(map, marker);
                                                        });
            }
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body>
    <div id="map-locator-pin" style="width: 800px; height: 100%;">
    </div>
</body>
</html>

上記の例を確認してください

于 2014-11-30T07:59:41.637 に答える
0

マップを表示するには、コードを変更する必要があります。使用しています

<script type="text/javascript" src="http://apis.mapmyindia.com/v2.0/mapApi/licKey=4d29cecd1c6f9f97247b82e18b637093&platform=aspx"></script>

上の行を次のように変更

<script src="https://apis.mapmyindia.com/advancedmaps/v1/4d29cecd1c6f9f97247b82e18b637093/map_load?v=0.1">

MapMyIndi​​a マップの初期化用。使用している

var map = $("#MapDiv");
map.MireoMap();

そのコードを次のように変更します

var map=new MapmyIndia.Map("MapDiv",{ center:[30.7333, 76.7794], zoomControl: true, hybrid:true, search:true, location:true});

MapmyIndi​​a マップを取得できる上記の 1 行のコードは、コンテナー要素に表示されます。

次に、マーカー プロット コードに進みます。 

var _X = '76.652826';
var _Y = '10.78716';
var pt = new Point(_X, _Y);  
map.MireoMap("addMarker", HTMLHelper.mapMarker("https://d2t1xqejof9utc.cloudfront.net/screenshots/pics/81591c98d66921ed45c6fbab36601942/medium.png", 100, 100), pt);

MapmyIndi​​a API は緯度経度を使用してマーカーをプロットできるため、マーカー プロット用のポイントを作成する必要はありません。

マーカー作成コードを次のように変更します

     var _X = '76.652826';
     var _Y = '10.78716';
     var markerIcon = L.icon({
    iconUrl: 'https://d2t1xqejof9utc.cloudfront.net/screenshots/pics/81591c98d66921ed45c6fbab36601942/medium.png',
    iconSize:     [100, 100], // size of the icon
    iconAnchor:   [50, 100] // point of the icon which will correspond to marker's location
});
   new L.marker([_X,_Y], {icon: markerIcon}).addTo(map);

そして今、複数のマーカーを作成する方法に答えます。その方法は複数ありますが、

1）これは非常に単純で、マーカーを1つずつ作成し、次のようにマップに追加します

     var _X = '76.652826';
     var _Y = '10.78716';
     var markerIcon = L.icon({
    iconUrl: 'https://d2t1xqejof9utc.cloudfront.net/screenshots/pics/81591c98d66921ed45c6fbab36601942/medium.png',
    iconSize:     [100, 100], 
    iconAnchor:   [50, 100]});

new L.marker([_X,_Y], {icon: markerIcon}).addTo(map);

     _X = '76.602826';
     _Y = '10.70716';
      markerIcon = L.icon({
    iconUrl: 'https://d2t1xqejof9utc.cloudfront.net/screenshots/pics/81591c98d66921ed45c6fbab36601942/medium.png',
    iconSize:     [100, 100], 
    iconAnchor:   [50, 100]});

new L.marker([_X,_Y], {icon: markerIcon}).addTo(map);

2) または、for ループを実行して複数のマーカーを作成し、マップに追加することもできます

var markerLatLngs = [
        [30.7333, 76.7794],
        [30.7233, 76.7694],
        [30.7133, 76.7594]
        ];
var markerIcon = L.icon({
        iconUrl: 'https://d2t1xqejof9utc.cloudfront.net/screenshots/pics/81591c98d66921ed45c6fbab36601942/medium.png',
        iconSize:     [100, 100], 
        iconAnchor:   [50, 100]});
    for (var i = 0; i < markerLatLngs.length; i++) {
          new L.marker([markerLatLngs[i][0], markerLatLngs[i][1]], {icon: markerIcon}).addTo(map);
    }

3) 大量のマーカーがある場合、これは非常に重要です。レイヤー グループを作成し、すべてのマーカーをそのグループに追加し、そのグループをマップに追加します。

     var markerLatLngs = [
            [30.7333, 76.7794],
            [30.7233, 76.7694],
            [30.7133, 76.7594]
            ];
 var markerIcon = L.icon({
                iconUrl: 'https://d2t1xqejof9utc.cloudfront.net/screenshots/pics/81591c98d66921ed45c6fbab36601942/medium.png',
                iconSize:     [100, 100], 
                iconAnchor:   [50, 100]});
        var markerGroup = new L.featureGroup(); //Create  a group for markers
        for (var i = 0; i < markerLatLngs.length; i++) {
         var marker= new L.marker([markerLatLngs[i][0], markerLatLngs[i][1]], {icon: markerIcon});
           markerGroup.addLayer(marker); //add marker into group
        }
    markerGroup.addTo(map); // add Group of markers to map
于 2018-03-30T20:37:53.257 に答える