在MapMyindia Map上显示多个标记
Show multiple marker on MapMyindia Map
我正在使用地图我的印度地图。我根据定义纬度和经度在地图上显示一个标记,但现在我必须在地图上显示多个标记。我不知道,请帮帮我。我给你单标记绘图代码。
<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/
<!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>
<!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>
检查上面的示例
您的代码需要一些更改才能显示地图,您正在使用
<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">
对于初始化地图我的印度地图。您正在使用
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能够使用纬度液化天然气绘制标记
更改标记创建代码
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)或者您可以运行循环创建多个标记并添加到地图
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
相关文章:
- 从桌面读取python文件时高亮显示代码
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 如何在生成下载文件时显示加载动画
- React重新渲染但未显示正确的组件
- nodejs-expressjs上传图像并显示它们
- 使用JSP从服务器检索和显示图像
- 音频控件在mouseover上显示,在mouseout上淡出
- 让文本输入幻灯片显示输入时的新文本输入?然后向后滑动
- 使用电话间隙在Android应用程序中显示SQL Lite的数据
- 显示5秒后隐藏潜水
- 画廊图像未显示
- 不显示带有本地json文件数据的谷歌地图脚本
- 如何将json数据显示为html
- 谷歌地图不是以HTML显示,而是在JS Fiddle上工作
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 高亮显示时编辑文本大小和颜色
- 有时数据是't显示在浏览器中
- 当鼠标悬停在文本中的单词上时显示警报
- 角度图表;t显示在我的页面中
- 在MapMyindia Map上显示多个标记