添加标记点

来源：互联网发布：百度推广seo 编辑：程序博客网时间：2024/06/06 03:11

一、添加标记点分四步走：

1、添加标记图层

markLayer = new SuperMap.Layer.Markers("Markers Layer");

2、添加地图图层

 map = new SuperMap.Map("map",{controls:[new SuperMap.Control.PanZoomBar(),//平移缩放地图按钮new SuperMap.Control.ScaleLine(),//显示比例尺new SuperMap.Control.Navigation({dragPanOptions:{enableKinetic:true}}),//导航，鼠标可在窗口拖拽地图new SuperMap.Control.OverviewMap({maximized:true})//鹰眼窗口]});

3、将标记图层和地图图层添加进<div>容器中

var objs = [layer, markLayer];map.addLayers(objs);

4、在标记图层绘制标记点

var size = new SuperMap.Size(44,44);//设置图片大小var icon = new SuperMap.Icon("theme/images/cluster1.png",size);//添加图片var marker = new SuperMap.Marker(new SuperMap.LonLat(116.3,39.9), icon);//设置位置markLayer.addMarker(marker);

二、绘制标记点分四步：

1、设置标记点图片大小

var size = new SuperMap.Size(44,44);//设置图片大小

2、设置标记点图片引用位置

var icon = new SuperMap.Icon("theme/images/cluster1.png",size);//添加图片

3、设置标记点经纬度或坐标位置

var marker = new SuperMap.Marker(new SuperMap.LonLat(116.3,39.9), icon);//设置位置

4、将标记点添加进标记图层

markLayer.addMarker(marker);

示例代码：标记北京的位置：

<!DOCTYPE HTML><html><head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <title>SuperMap iClient for JavaScript:TiledDynamicRESTLayer</title><script src="libs/SuperMap.Include.js"></script>    <script type="text/javascript">    var map, layer, markLayer;var url = "http://localhost:8090/iserver/services/map-World/rest/maps/World_Image";    function onPageLond() {        map = new SuperMap.Map("map",{controls:[new SuperMap.Control.PanZoomBar(),//平移缩放地图按钮new SuperMap.Control.ScaleLine(),//显示比例尺new SuperMap.Control.Navigation({dragPanOptions:{enableKinetic:true}}),//导航，鼠标可在窗口拖拽地图new SuperMap.Control.OverviewMap({maximized:true})//鹰眼窗口]});        layer = new SuperMap.Layer.TiledDynamicRESTLayer("World_Image", url, {transparent:true, cacheEnabled:true},{maxResolution:"auto", scales:[1/150000000]}/*控制地图显示比例尺，即大小*/);        layer.events.on({"layerInitialized": addLayer});//添加标记图层,先添加图层markLayer = new SuperMap.Layer.Markers("Markers Layer");    }    function addLayer() {var objs = [layer, markLayer];        map.addLayers(objs);        map.setCenter(new SuperMap.LonLat(0, 0), 0);    }//添加图层，通过按钮在图层上添加元素，然后加入图层function showMark(){markLayer.removeMarker();var size = new SuperMap.Size(44,44);//设置图片大小var icon = new SuperMap.Icon("theme/images/cluster1.png",size);//添加图片var marker = new SuperMap.Marker(new SuperMap.LonLat(116.3,39.9), icon);//设置位置markLayer.addMarker(marker);}    </script></head><body onload="onPageLond()">    <div id="map" style="position:relative; left:0px; right:0px; width:1000px;height:500px;" >                 </div><form id="from"><input id="input" type="button" value="标记" onclick="showMark()" /></form></body></html>

效果图：

阅读全文

0 0