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

编程问答

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

發布時間：2025/4/14 编程问答 20 豆豆

生活随笔收集整理的這篇文章主要介紹了超图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版本在地图上使用图标标记地理点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。