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