在 MapMyindia 地图上显示多个标记答案

【问题标题】：Show multiple marker on MapMyindia Map在 MapMyindia 地图上显示多个标记
【发布时间】：2014-11-30 07:29:23
【问题描述】：

我正在使用我的印度地图。我根据定义的纬度和经度在地图上显示一个标记。但是现在我必须在地图上显示多个标记。我不知道请帮帮我。我给你一个标记绘图代码。

    <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>

此代码用于单个地图绘图。我想在地图上显示多个标记。我为您提供了一些参考网址

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

http://maps.mapmyindia.com/

【问题讨论】：

标签： javascript jquery dictionary mapmyindia-api

【解决方案1】：

<!DOCTYPE html>
<html>
    <head>
        <title>Mapmyindia Maps</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <script src="https://apis.mapmyindia.com/advancedmaps/v1/<Lic_Key>/map_load?v1.1"></script>
                <style>
                    html, body, #map {  margin: 0;  padding: 0;width: 100%;height: 100%;}
                </style>

    </head>
    <body>
            <div id="map"></div>
        <script>
        /*map initialized*/
        var map=new MapmyIndia.Map("map",{ center:[28.61, 77.23], zoomControl: true, hybrid:true, search:true, location:true}); 

        /*Latitude,Longitude set*/
        var LatLng = [
        ["marker1",28.624076, 77.209860],
        ["marker2",28.607198, 77.196299],
        ["marker3",28.619706, 77.197501],
        ["marker4",28.618049, 77.223422],
        ["marker5",28.627391, 77.222907],
        ["marker6",28.632966, 77.206599],
        ["marker7",28.615035, 77.227370]
        ];

        /*iterate on size of latitiude longitude set*/
        for (var i = 0; i < LatLng.length; i++) {
        new L.marker([LatLng[i][1],LatLng[i][2]])
                .bindPopup(LatLng[i][0])
                .addTo(map);
        }
         </script>
    </body>
</html>

【讨论】：

【解决方案2】：

    <!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>

检查上面的例子

【讨论】：

@prasead 我无法使用谷歌地图。我向您推荐链接，该链接提供有关地图的一些参考link

【解决方案3】：

您的代码需要一些更改才能显示地图，您正在使用

<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">

用于初始化 MapMyIndia 地图。你正在使用

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

修改代码

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

上面的单行代码能够获取 MapmyIndia 地图并将显示到您的容器元素中。

现在来看标记绘图代码：

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);

在这里您正在创建点，因为 MapmyIndia API 能够使用 lat lng 绘制标记，因此无需为标记绘图创建点

通过

更改标记创建代码

     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）这个非常简单，一一创建标记并添加到地图中

     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

【讨论】：