当前位置：首页 > 编程资源 > 编程问答 >内容正文

编程问答

超图js版本在地图上使用图标标记地理点

发布时间：2025/4/14 编程问答 41 豆豆

生活随笔收集整理的这篇文章主要介绍了超图js版本在地图上使用图标标记地理点小编觉得挺不错的,现在分享给大家,帮大家做个参考.

效果；

项目结构；

代码；

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="marker1.aspx.cs" Inherits="marker_marker1" %><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标记图层Demo1</title> <style type="text/css"> body{ margin: 0; overflow: hidden; background: #fff; } #map{ position: relative; height: 553px; border:1px solid #3473b7; } </style> <link href='../css/bootstrap.min.css' rel='stylesheet' /> <link href='../css/bootstrap-responsive.min.css' rel='stylesheet' /> <script src = '../libs/SuperMap.Include.js'></script> <script type="text/javascript"> var map,layer, markerlayer ,marker, host = "http://localhost:8090"; url = host + "/iserver/services/map-china400/rest/maps/China";function init() { map = new SuperMap.Map("map",{controls:[ new SuperMap.Control.Zoom() , new SuperMap.Control.Navigation() , new SuperMap.Control.LayerSwitcher() ] }); map.addControl(new SuperMap.Control.MousePosition()); layer= new SuperMap.Layer.TiledDynamicRESTLayer("World", url, null,{maxResolution:"auto"}); layer.events.on({"layerInitialized":addLayer}); markerlayer = new SuperMap.Layer.Markers("卡通小人标记层"); addktxr(); } function addLayer(){map.addLayers([layer,markerlayer]); //显示地图范围 map.setCenter(new SuperMap.LonLat(0,0), 0);} //添加标记 function addktxr() { markerlayer.removeMarker(marker); var size = new SuperMap.Size(88,66); var offset = new SuperMap.Pixel(-(size.w/2), -size.h); var icon = new SuperMap.Icon('../images/ktxr1.jpg', size, offset); marker =new SuperMap.Marker(new SuperMap.LonLat(116.3,39.9),icon) ; markerlayer.addMarker(marker); } </script> </head> <body onload="init()" > <div id="map"></div></body> </html>

new SuperMap.Control.Zoom() ,
new SuperMap.Control.Navigation() ,
new SuperMap.Control.LayerSwitcher()

这几个是往地图上加的控件；缩放，导航，图层控件；

缩放控件是左上角加减号那个；图层控件显示当前有2个图层：卡通小人标记层，World；

markerlayer = new SuperMap.Layer.Markers("卡通小人标记层");

定义一个marker层，双引号里面是图层名称；

map.addLayers([layer,markerlayer]);

添加2个图层；

marker =new SuperMap.Marker(new SuperMap.LonLat(116.3,39.9),icon) ;
markerlayer.addMarker(marker);

先定义icon的大小，偏移，然后用经纬度和icon构造一个marker；然后把marker加到markerlayer层；

可以使用任何图标来标识地理信息上有意义的点；按自己的需要；可根据自己需要标记多个点；

总结

以上是生活随笔为你收集整理的超图js版本在地图上使用图标标记地理点的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。