自定义控件和设置地图状态

此示例展示的是如何通过在地图上添加自定义的控件,改变地图的状态。

关键代码

/**
 * HomeControl是一个自定义的控件
 * 点击set home 按钮可以记录当前地图的位置。
 * 拖动地图到其他地方
 * 点击home按钮，可将地图还原回之前设置的位置
 */

var map;
var beijing = new sogou.maps.Point(12956000,4824875);
var shanghai = new sogou.maps.Point(13522000,3641125);

HomeControl.prototype.home_ = null;

HomeControl.prototype.getHome = function() {
  return this.home_;
}

HomeControl.prototype.setHome = function(home) {
  this.home_ = home;
}

function HomeControl(controlDiv, map, home) 
{

  var control = this;
  control.home_ = home;
  controlDiv.style.padding = '5px';

  var goHomeUI = document.createElement('DIV'); 
  goHomeUI.style.backgroundColor = 'white';
  goHomeUI.style.borderStyle = 'solid';
  goHomeUI.style.borderWidth = '2px';
  goHomeUI.style.cursor = 'pointer';
  goHomeUI.style.textAlign = 'center';
  goHomeUI.title = 'Click to set the map to Home';
  controlDiv.appendChild(goHomeUI);

  var goHomeText = document.createElement('DIV');
  goHomeText.style.fontFamily = 'Arial,sans-serif';
  goHomeText.style.fontSize = '12px';
  goHomeText.style.paddingLeft = '4px';
  goHomeText.style.paddingRight = '4px';
  goHomeText.innerHTML = 'Home';
  goHomeUI.appendChild(goHomeText);
  
  var setHomeUI = document.createElement('DIV');
  setHomeUI.style.backgroundColor = 'white';
  setHomeUI.style.borderStyle = 'solid';
  setHomeUI.style.borderWidth = '2px';
  setHomeUI.style.cursor = 'pointer';
  setHomeUI.style.textAlign = 'center';
  setHomeUI.title = 'Click to set Home to the current center';
  controlDiv.appendChild(setHomeUI);

  var setHomeText = document.createElement('DIV');
  setHomeText.style.fontFamily = 'Arial,sans-serif';
  setHomeText.style.fontSize = '12px';
  setHomeText.style.paddingLeft = '4px';
  setHomeText.style.paddingRight = '4px';
  setHomeText.innerHTML = 'Set Home';
  setHomeUI.appendChild(setHomeText);

  // 添加侦听器，当点击home按钮时，还原地图状态
  sogou.maps.event.addDomListener(goHomeUI, 'click', function() {
    var currentHome = control.getHome();
    map.setCenter(currentHome);
  });
  
  // 添加侦听器，当点击set home按钮时，获取地图状态，记录下来
  sogou.maps.event.addDomListener(setHomeUI, 'click', function() {
    var newHome = map.getCenter();
    control.setHome(newHome);
  });
}

function initialize() {
  var mapDiv = document.getElementById('map_canvas');
  var myOptions = {
    zoom: 12,
	mapControl:false,//关闭默认的控件
    center: shanghai,
    mapTypeId: sogou.maps.MapTypeId.ROADMAP
  }
  map = new sogou.maps.Map(mapDiv, myOptions);


  var homeControlDiv = document.createElement('DIV');
  homeControlDiv.style.position="absolute";
  homeControlDiv.style.left="10px";
  homeControlDiv.style.top="10px";
  var homeControl = new HomeControl(homeControlDiv, map, beijing);
  map.getContainer().appendChild(homeControlDiv);

}

代码解析

首先创建地图，关闭地图默认的控件。

var mapDiv = document.getElementById('map_canvas');
var myOptions = {
	zoom: 12,
	mapControl:false,//关闭默认的控件
	center: shanghai,
	mapTypeId: sogou.maps.MapTypeId.ROADMAP
}
map = new sogou.maps.Map(mapDiv, myOptions);

定义控件，创建控件的事件。将初始化后的控件添加到地图上。

function HomeControl(controlDiv, map, home) 
{

  var control = this;
  control.home_ = home;
  controlDiv.style.padding = '5px';

  var goHomeUI = document.createElement('DIV'); 
  goHomeUI.style.backgroundColor = 'white';
  goHomeUI.style.borderStyle = 'solid';
  goHomeUI.style.borderWidth = '2px';
  goHomeUI.style.cursor = 'pointer';
  goHomeUI.style.textAlign = 'center';
  goHomeUI.title = 'Click to set the map to Home';
  controlDiv.appendChild(goHomeUI);

  var goHomeText = document.createElement('DIV');
  goHomeText.style.fontFamily = 'Arial,sans-serif';
  goHomeText.style.fontSize = '12px';
  goHomeText.style.paddingLeft = '4px';
  goHomeText.style.paddingRight = '4px';
  goHomeText.innerHTML = 'Home';
  goHomeUI.appendChild(goHomeText);
  
  var setHomeUI = document.createElement('DIV');
  setHomeUI.style.backgroundColor = 'white';
  setHomeUI.style.borderStyle = 'solid';
  setHomeUI.style.borderWidth = '2px';
  setHomeUI.style.cursor = 'pointer';
  setHomeUI.style.textAlign = 'center';
  setHomeUI.title = 'Click to set Home to the current center';
  controlDiv.appendChild(setHomeUI);

  var setHomeText = document.createElement('DIV');
  setHomeText.style.fontFamily = 'Arial,sans-serif';
  setHomeText.style.fontSize = '12px';
  setHomeText.style.paddingLeft = '4px';
  setHomeText.style.paddingRight = '4px';
  setHomeText.innerHTML = 'Set Home';
  setHomeUI.appendChild(setHomeText);

  // 添加侦听器，当点击home按钮时，还原地图状态
  sogou.maps.event.addDomListener(goHomeUI, 'click', function() {
    var currentHome = control.getHome();
    map.setCenter(currentHome);
  });
  
  // 添加侦听器，当点击set home按钮时，获取地图状态，记录下来
  sogou.maps.event.addDomListener(setHomeUI, 'click', function() {
    var newHome = map.getCenter();
    control.setHome(newHome);
  });
}
var homeControlDiv = document.createElement('DIV');
homeControlDiv.style.position="absolute";
homeControlDiv.style.left="10px";
homeControlDiv.style.top="10px";
var homeControl = new HomeControl(homeControlDiv, map, beijing);
map.getContainer().appendChild(homeControlDiv);

完整代码

<!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">
/**
 * HomeControl是一个自定义的控件
 * 点击set home 按钮可以记录当前地图的位置。
 * 拖动地图到其他地方
 * 点击home按钮，可将地图还原回之前设置的位置
 */

var map;
var beijing = new sogou.maps.Point(12956000,4824875);
var shanghai = new sogou.maps.Point(13522000,3641125);

HomeControl.prototype.home_ = null;

HomeControl.prototype.getHome = function() {
  return this.home_;
}

HomeControl.prototype.setHome = function(home) {
  this.home_ = home;
}

function HomeControl(controlDiv, map, home) 
{

  var control = this;
  control.home_ = home;
  controlDiv.style.padding = '5px';

  var goHomeUI = document.createElement('DIV'); 
  goHomeUI.style.backgroundColor = 'white';
  goHomeUI.style.borderStyle = 'solid';
  goHomeUI.style.borderWidth = '2px';
  goHomeUI.style.cursor = 'pointer';
  goHomeUI.style.textAlign = 'center';
  goHomeUI.title = 'Click to set the map to Home';
  controlDiv.appendChild(goHomeUI);

  var goHomeText = document.createElement('DIV');
  goHomeText.style.fontFamily = 'Arial,sans-serif';
  goHomeText.style.fontSize = '12px';
  goHomeText.style.paddingLeft = '4px';
  goHomeText.style.paddingRight = '4px';
  goHomeText.innerHTML = '<b>Home</b>';
  goHomeUI.appendChild(goHomeText);
  
  var setHomeUI = document.createElement('DIV');
  setHomeUI.style.backgroundColor = 'white';
  setHomeUI.style.borderStyle = 'solid';
  setHomeUI.style.borderWidth = '2px';
  setHomeUI.style.cursor = 'pointer';
  setHomeUI.style.textAlign = 'center';
  setHomeUI.title = 'Click to set Home to the current center';
  controlDiv.appendChild(setHomeUI);

  var setHomeText = document.createElement('DIV');
  setHomeText.style.fontFamily = 'Arial,sans-serif';
  setHomeText.style.fontSize = '12px';
  setHomeText.style.paddingLeft = '4px';
  setHomeText.style.paddingRight = '4px';
  setHomeText.innerHTML = '<b>Set Home</b>';
  setHomeUI.appendChild(setHomeText);

  // 添加侦听器，当点击home按钮时，还原地图状态
  sogou.maps.event.addDomListener(goHomeUI, 'click', function() {
    var currentHome = control.getHome();
    map.setCenter(currentHome);
  });
  
  // 添加侦听器，当点击set home按钮时，获取地图状态，记录下来
  sogou.maps.event.addDomListener(setHomeUI, 'click', function() {
    var newHome = map.getCenter();
    control.setHome(newHome);
  });
}

function initialize() {
  var mapDiv = document.getElementById('map_canvas');
  var myOptions = {
    zoom: 12,
	mapControl:false,//关闭默认的控件
    center: shanghai,
    mapTypeId: sogou.maps.MapTypeId.ROADMAP
  }
  map = new sogou.maps.Map(mapDiv, myOptions);


  var homeControlDiv = document.createElement('DIV');
  homeControlDiv.style.position="absolute";
  homeControlDiv.style.left="10px";
  homeControlDiv.style.top="10px";
  var homeControl = new HomeControl(homeControlDiv, map, beijing);
  map.getContainer().appendChild(homeControlDiv);

}

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

自定义控件和设置地图状态

关键代码

代码解析

完整代码

运行代码