屏幕（地图区域）坐标系、DIV拖拽层像素坐标系、搜狗坐标系转换示例

此示例展示的是如何获取坐标投影对象，像素坐标与地理坐标互转，以及将自定义的覆盖物添加到地图。。

首先鼠标点击下地图区域任意地方。
在点击位置叠加自定义的蓝色方块和绿色方块，缩放、拖动地图发现：
1、拖动地图时，绿色方块跟着走，而蓝色方块不动。
2、缩放地图时，蓝色和绿色方块的左上角都固定在地图的某坐标位置。

拖动时蓝色和绿色方块表现出来的的不同是因为它们在不同的容器中，蓝色方块是被添加到了地图区域容器中，而绿色方块被添加到了地图拖拽层中，它们相对于各自父DIV左上角的位置分别为屏幕（地图区域）坐标和像素（DIV拖拽层）坐标。

关键代码

//将自定义的绿色层添加到地图的可拖到容器中
map.getDiv().appendChild(greenDiv);
//将自定义的蓝色层添加到地图最外层容器中
map.getContainer().appendChild(blueDiv);
//获取投影对象
projection=map.getProjection();
//侦听点击事件
sogou.maps.event.addListener(map, 'click', function(mouseEvent) {

	position=mouseEvent.point;
	setPosition(position);
});
//缩放后要重新计算位置
sogou.maps.event.addListener(map, 'zoom_changed', function() {
	setPosition(position);
});

代码解析

首先要先创建一个地图，自定义两个图层。

//自定义一个绿色层
greenDiv=document.createElement("div");
greenDiv.style.position="absolute";
greenDiv.style.background="#0f0";
greenDiv.style.width="80px";
greenDiv.style.height="80px";
//自定义一个蓝色层
blueDiv=document.createElement("div");
blueDiv.style.position="absolute";
blueDiv.style.background="#00f";
blueDiv.style.width="50px";
blueDiv.style.height="50px";

var myLatlng = new sogou.maps.LatLng(39.992792,116.326142);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: sogou.maps.MapTypeId.ROADMAP
}
map = new sogou.maps.Map(document.getElementById("map_canvas"), myOptions);

将自定义的两个层分别覆盖到地图的拖拽层以及容器层。

//将自定义的绿色层添加到地图的可拖到容器中
map.getDiv().appendChild(greenDiv);
//将自定义的蓝色层添加到地图最外层容器中
map.getContainer().appendChild(blueDiv);

获取投影对象,用于计算存放可拖动地图的 DOM 元素中指定地理位置的像素坐标，计算地图外部容器的 DOM 元素中指定地理位置的像素坐标。通过侦听地图的单击事件，以及缩放级别改变事件来展示此对象的用法。

//获取投影对象
  projection=map.getProjection();
//设置位置
function setPosition(point)
{
	//计算存放可拖动地图的 DOM 元素中指定地理位置的像素坐标。
	var divPixelCoord=projection.fromLatLngToDivPixel(point);
	//设置层到点击的位置
	greenDiv.style.left=divPixelCoord.x+"px";
	greenDiv.style.top=divPixelCoord.y+"px";

	//计算地图外部容器的 DOM 元素中指定地理位置的像素坐标。
	var containerPixelCoord=projection.fromLatLngToContainerPixel(point);
	//设置层到点击的位置
	blueDiv.style.left=containerPixelCoord.x+"px";
	blueDiv.style.top=containerPixelCoord.y+"px";
}
//侦听点击事件
sogou.maps.event.addListener(map, 'click', function(mouseEvent) {

	position=mouseEvent.point;
	setPosition(position);
});
//缩放后要重新计算位置
sogou.maps.event.addListener(map, 'zoom_changed', function() {
	setPosition(position);
});

完整代码

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=gb2312"/>
<title>搜狗地图 JavaScript API 示例: 像素坐标与地理坐标的互转</title>
<style type="text/css">
html {height: auto;}
body {height: auto;margin: 0;padding: 0;}
#map_canvas {width:1000px;height: 500px;position: absolute;}
@media print {#map_canvas {height: 950px;}}
</style>
<script type="text/javascript" src="http://api.go2map.com/maps/js/api_v2.5.1.js"></script>
<script type="text/javascript">
 /**
  * 像素坐标与地理坐标的互转
  * 用于添加自定义的控件或者层到地图区域或者地图的可拖到层中
  */
var map;
var greenDiv;
var blueDiv;
var position;
var projection;
function initialize() {
  //自定义一个绿色层
  greenDiv=document.createElement("div");
  greenDiv.style.position="absolute";
  greenDiv.style.background="#0f0";
  greenDiv.style.width="80px";
  greenDiv.style.height="80px";
  //自定义一个蓝色层
  blueDiv=document.createElement("div");
  blueDiv.style.position="absolute";
  blueDiv.style.background="#00f";
  blueDiv.style.width="50px";
  blueDiv.style.height="50px";

  var myLatlng = new sogou.maps.LatLng(39.992792,116.326142);
  var myOptions = {
    zoom: 12,
    center: myLatlng,
    mapTypeId: sogou.maps.MapTypeId.ROADMAP
  }
  map = new sogou.maps.Map(document.getElementById("map_canvas"), myOptions);
  //将自定义的绿色层添加到地图的可拖到容器中
  map.getDiv().appendChild(greenDiv);
  //将自定义的蓝色层添加到地图最外层容器中
  map.getContainer().appendChild(blueDiv);
  //获取投影对象
  projection=map.getProjection();
  //侦听点击事件
  sogou.maps.event.addListener(map, 'click', function(mouseEvent) {
 
		position=mouseEvent.point;
		setPosition(position);
  });
  //缩放后要重新计算位置
  sogou.maps.event.addListener(map, 'zoom_changed', function() {
		setPosition(position);
  });
}

//设置位置
function setPosition(point)
{
	if(!point)return;
	//计算存放可拖动地图的 DOM 元素中指定地理位置的像素坐标。
	var divPixelCoord=projection.fromLatLngToDivPixel(point);
	//设置层到点击的位置
	greenDiv.style.left=divPixelCoord.x+"px";
	greenDiv.style.top=divPixelCoord.y+"px";

	//计算地图外部容器的 DOM 元素中指定地理位置的像素坐标。
	var containerPixelCoord=projection.fromLatLngToContainerPixel(point);
	//设置层到点击的位置
	blueDiv.style.left=containerPixelCoord.x+"px";
	blueDiv.style.top=containerPixelCoord.y+"px";
}

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas"></div>
</body>
</html>

屏幕（地图区域）坐标系、DIV拖拽层像素坐标系、搜狗坐标系转换 示例

关键代码

代码解析

完整代码

运行代码

屏幕（地图区域）坐标系、DIV拖拽层像素坐标系、搜狗坐标系转换示例