<html xmlns="<a target="_blank" href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title></title>
<script src="libs/SuperMap.Include.js"></script>
<script type="text/<a href="http://lib.csdn.net/base/javascript" class="replace_word" title="JavaScript知识库" target="_blank" style="color:#df3434font-weight:bold">JavaScript</a>">
var map, layer, popup
var featuresLayer, drawLine, drawPoint, drawPolygon, selectDrawFeature
var drawFeatureStyle = {
strokeColor: null,
strokeWidth: null,
strokeOpacity: null,
pointRadius: 6,
fillColor: null,
fillOpacity: null,
cursor: "pointer"
}//定义要添加要素的样式
var selectStyle={
strokeColor: "#0099FF",
strokeWidth: 2,
pointerEvents: "visiblePainted",
fillColor: "#FF8247",
fillOpacity: 0.4,
pointRadius: 6,
label: "",
fontSize: 14,
fontWeight: "normal",
cursor: "pointer"
}// 点击添加的元素之后的样式
// 设置访问的GIS服务地址
var url = "<a target="_blank" href="http://localhost:8090/iserver/services/map-ChinaTestWorkPlace/rest/maps/ChinaTest">http://localhost:8090/iserver/services/map-ChinaTestWorkPlace/rest/maps/ChinaTest</a>"
function GetMap() {
// 创建地图对象
map = new SuperMap.Map("map")
//control = new SuperMap.Control.MousePosition()//该控件显示鼠标移动时，所在点的地理坐标。
//map.addControl(control) //添加控件
featuresLayer = new SuperMap.Layer.Vector("<a target="_blank" href="mailto:test!@#')//">test!@#")//</a> test!@# 是图层的name属性
drawLine = new SuperMap.Control.DrawFeature(featuresLayer, SuperMap.Handler.Path, { multi: true })
drawLine.events.on({ "featureadded": drawCompleted })
drawPoint = new SuperMap.Control.DrawFeature(featuresLayer, SuperMap.Handler.Point, { multi: true })
drawPoint.events.on({ "featureadded": drawCompleted })
drawPolygon = new SuperMap.Control.DrawFeature(featuresLayer, SuperMap.Handler.Polygon, { multi: true })
drawPolygon.events.on({ "featureadded": drawCompleted })
map.addControls([drawLine, drawPoint, drawPolygon])
map.addLayer(featuresLayer)
// 创建图层对象
layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", url, { transparent: true, cacheEnabled: true }, { maxResolution: "auto" })
layer.events.on({ "layerInitialized": AddLayer })
}
// 加载图层
function AddLayer() {
// 向Map添加图层
map.addLayer(layer)
map.setCenter(new SuperMap.LonLat(116.409749, 39.912344), 1)</p><p> //这里添加两种事件方式点击事件和mouseover事件，都可以实现，这里屏蔽掉单击事件。
// 添加单击事件
//selectDrawFeature = new SuperMap.Control.SelectFeature(featuresLayer, {
//onSelect: openWindow,
//onUnselect: unfeatueSelect
//})
//selectDrawFeature.repeat = true
//selectDrawFeature.toggle = true
//map.addControl(selectDrawFeature)
//selectDrawFeature.activate()
//添加鼠标mouseover 事件
selectDrawFeature = new SuperMap.Control.SelectFeature(featuresLayer, {
onSelect: openWindow,
onUnselect: unfeatueSelect,
hover:true
})
map.addControl(selectDrawFeature)
selectDrawFeature.activate()
}
function drawFeature(type) {
var fillColor = document.getElementById("color1").value
var strokeColor = document.getElementById("color2").value
var opacity = document.getElementById("txtOpacity").value
var lineWidth = document.getElementById("txtLineWidth").value
drawFeatureStyle.fillColor = fillColor
drawFeatureStyle.strokeColor = strokeColor
drawFeatureStyle.strokeWidth = lineWidth
drawFeatureStyle.strokeOpacity = opacity
drawFeatureStyle.fillOpacity = opacity
if (type === "point") {
drawPoints()
}
else if (type === "line") {
drawLines()
}
else if (type === "polygon") {
drawPolygons()
}
}
function drawPoints() {
featuresLayer.style = drawFeatureStyle
drawPoint.activate()
}
function drawLines() {
featuresLayer.style = drawFeatureStyle
drawLine.activate()
}
function drawPolygons() {
featuresLayer.style = drawFeatureStyle
drawPolygon.activate()
}
function drawCompleted(drawGeometryArgs) {
drawLine.deactivate()
drawPoint.deactivate()
drawPolygon.deactivate()
}
function clearAll() {
featuresLayer.removeAllFeatures()
}
function openWindow(feature) {
var name
if (feature.geometry.CLASS_NAME == "SuperMap.Geometry.MultiPoint") {
name = "标注点"
} else if (feature.geometry.CLASS_NAME == "SuperMap.Geometry.MultiPolygon") {
name = "标注面"
} else {
name = "标注线"
}
popup = new SuperMap.Popup.FramedCloud("chicken",
feature.geometry.getBounds().getCenterLonLat(),
null,
name,
null, true)
feature.popup = popup
popup.panMapIfOutOfView = true
map.addPopup(popup)
feature.style = selectStyle
featuresLayer.redraw()
featuresLayer.setOpacity(0.5)
}
function unfeatueSelect(feature) {
map.removePopup(feature.popup)
feature.popup.destroy()
feature.popup = null</p><p> feature.style = drawFeatureStyle
featuresLayer.redraw()
}
</script>
</head>
<body onload="GetMap()">
<div>
<img alt="点" src="resource/controlImages/drawPoint.png" onclick="drawFeature('point')" />
<img alt="线" src="resource/controlImages/drawLine.png" onclick="drawFeature('line')" />
<img alt="面" src="resource/controlImages/drawRegion.png" onclick="drawFeature('polygon')" />
<img alt="清除" src="resource/controlImages/eraser.png" onclick="clearAll()" />
</div>
<div>
<table style="font-size: 12px">
<tr>
<td>
填充颜色：
</td>
<td>
<input type="text" size="10" id="color1" maxlength="7" name="rgb1" value="#FFFFFF"
onclick="showColorPicker(this, document.forms[0].rgb1)"/>
</td>
</tr>
<tr>
<td>
填充透明度：
</td>
<td>
<select id="txtOpacity">
<option value="0.1">0.1</option>
<option value="0.2">0.2</option>
<option value="0.3">0.3</option>
<option value="0.4">0.4</option>
<option value="0.5" selected="selected">0.5</option>
<option value="0.6">0.6</option>
<option value="0.7">0.7</option>
<option value="0.8">0.8</option>
<option value="0.9">0.9</option>
<option value="1.0">1.0</option>
</select>
</td>
</tr>
<tr>
<td>
线宽：
</td>
<td>
<input type="text" id="txtLineWidth" style="width: 50px" value="2" />
</td>
</tr>
<tr>
<td>
边线颜色：
</td>
<td>
<input type="text" size="10" id="color2" maxlength="7" name="rgb2" value="#FF0000"
onclick="showColorPicker(this, document.forms[0].rgb2)"/>
</td>
</tr>
</table></p><p>
</div>
<div id="map" style="height: 640pxwidth: 720pxborder: 1px solid redmargin-left: automargin-right: auto"></div>
</body>
</html>
</p>
要想得到数据必须先得到百度地图的接口，不然怎么调用接口获取数据呢，首先我们在百度首页输入“百度api”回车后第一个就是我们要找的，点击进入。我们是通过网页获取json数据得到的数据，所以我们选择“开发”-》“Web服务API”点击进入。
进入这个页面后，我们选择“开发指南”-》“Geocoding API”选择这个进入我们想要的接口文档
在这里我们找到通过请求get方式的url，这个url可以通过经纬度获取到地址跟省市，看自己需要什么样的返回格式，有两种，一种是json格式，另一种是xml格式，我们选择json格式的进行测试。
我们直接用url打开，get请求后获取到的数据，可以看到地址省市县这些都有，可以获取经纬度旁边大量的信息。这些显示在页面上的内容我们怎么获取到并加以利用呢。
这里我们写个方法，通过调用百度地图的url获取到我们想要的数据，在获取之前必须先申请ak秘钥，百度的api文档说的很清楚，要先申请了才能使用。
这个是请求url解析获取数据的过程，这个方法截图小编简写了，如果有需要的朋友可以找我要，给我留言就行。
我们在页面上调用这个获取市的方法看看，通过传入经纬度，然后调用百度的api接口，我们可以获取到市的内容。
通过启动tomcat，在地址栏输入访问地址，然后请求得到的数据，地址栏我输入的是南昌市的经纬度，然后返回的是正确的市。这就是我们想要的结果，同样的道理，通过这个方法也能返回地址。
END
注意事项
如果没有秘钥ak是不能利用百度api的接口的，而且这个免费的ak每天只能访问100次，对于我们而且足够用了
用百度地图，给你提供一个思路。百度地图有个类叫覆盖物，你需要的是多边形覆盖物ploygon。然后你需要每个省或者市的坐标信息。
百度提供一个方法可以通过地名得到这个地名行政区域的坐标集合，具体的方法名你去百度地图api查。
百度地图覆盖物提供一个标签覆盖物Marker，可以用来显示文本信息。剩下的你自己摸索吧。
