OpenLayers 学习（五） 根据经纬度用Marker在地图上添加标记
<!DOCTYPE html>
<html>
<head>
<title>
根据经纬度在地图上添加标记
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- 加载OpenLayers 类库 -->
<script type="text/javascript" src="http://www.openlayers.cn/olapi/OpenLayers.js">
</script>
<style>
html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
</style>
<script type="text/javascript">
var basePath = '198.165.26.54';
var jsonStr='{"MMSI":"432855000","Long":"116.412","Lat":"39.956"}';
var shipInfo = eval('(' + (jsonStr == "" ? "[]" : jsonStr) + ')');
function init() {
var option = {
controls: [new OpenLayers.Control.Navigation(), //导航
new OpenLayers.Control.PanZoomBar(), //放大缩小
new OpenLayers.Control.Scale(),
new OpenLayers.Control.ScaleLine(),
new OpenLayers.Control.OverviewMap()],
numZoomLevels: 15 //,//最大级别
};
map = new OpenLayers.Map('map', option);
layer = new OpenLayers.Layer.WMTS({
name: "中国底图(矢量)", //测试地址
url: "http://t0.tianditu.com/vec_c/wmts", //中国底图
layer: "vec",
style: "default",
matrixSet: "c",
format: "tiles",
isBaseLayer: true
});
//测试使用，正式环境去掉
var tdt2 = new OpenLayers.Layer.WMTS({
name: "中国底图注记",
url: "http://t0.tianditu.com/cva_c/wmts", //中国底图注记
layer: "cva",
style: "default",
matrixSet: "c",
format: "tiles",
isBaseLayer: false
});
map.addLayers([layer,tdt2]);
addMarker();//添加标记
map.setCenter(new OpenLayers.LonLat(116.5, 40).transform(
new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()),7);//默认放大级别7
//map.zoomToMaxExtent();
//显示鼠标位置坐标
map.addControl(new OpenLayers.Control.MousePosition({displayProjection:'EPSG:4326'}));
}
//添加标记
function addMarker(){
var markers = new OpenLayers.Layer.Markers("分站");
//设置显示坐标
var x=0,y=0;
//北京
//图片显示
var icon = new OpenLayers.Icon('marker-gold.png',{w: 21, h: 25}, {x: -10.5, y: -25});
var feature = new OpenLayers.Feature(markers,new OpenLayers.LonLat(shipInfo.Long,shipInfo.Lat).transform(
new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()),{'icon': icon});
marker = feature.createMarker();
markers.addMarker(marker);
map.addLayer(markers);
}
</script>
</head>
<body onload="init()">
<div id="map" style="width: 100%;
height: 100%;">
</div>
</body>
</html> 转载自：https://blog.csdn.net/Stonesk/article/details/51616730
