自定义控件

此示例展示的是如何在地图上添加自定义的控件。

关键代码

/**
 * HomeControls 是一个自定义的类，功能是将简单的控件加到地图。
 * 点击左上角的按钮HOME后地图切换到上海
 */
function HomeControl(controlDiv, map) {

  // 为自定义控件设置CSS样式
  controlDiv.style.padding = '5px';

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

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

  // 添加一个侦听器，使得点击后调用方法设置地图到
  // 上海
  sogou.maps.event.addDomListener(controlUI, 'click', function() {
    map.setCenter(shanghai)
  });

}

  var homeControlDiv = document.createElement('DIV');
  homeControlDiv.style.position="absolute";
  homeControlDiv.style.left="10px";
  homeControlDiv.style.top="10px";
  var homeControl = new HomeControl(homeControlDiv, map);
  //将自定义的DIV添加到地图容器
  map.getContainer().appendChild(homeControlDiv);

代码解析

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

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

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

function HomeControl(controlDiv, map) {

  // 为自定义控件设置CSS样式
  controlDiv.style.padding = '5px';

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

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

  // 添加一个侦听器，使得点击后调用方法设置地图到
  // 上海
  sogou.maps.event.addDomListener(controlUI, 'click', function() {
    map.setCenter(shanghai)
  });

}
var homeControlDiv = document.createElement('DIV');
  homeControlDiv.style.position="absolute";
  homeControlDiv.style.left="10px";
  homeControlDiv.style.top="10px";
  var homeControl = new HomeControl(homeControlDiv, map);
  //将自定义的DIV添加到地图容器
  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">

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

/**
 * HomeControls 是一个自定义的类，功能是将简单的控件加到地图。
 * 点击左上角的按钮HOME后地图切换到上海
 */

function HomeControl(controlDiv, map) {

  // 为自定义控件设置CSS样式
  controlDiv.style.padding = '5px';

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

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

  // 添加一个侦听器，使得点击后调用方法设置地图到
  // 上海
  sogou.maps.event.addDomListener(controlUI, 'click', function() {
    map.setCenter(shanghai)
  });

}

function initialize() {
  var mapDiv = document.getElementById('map_canvas');
  var myOptions = {
    zoom: 12,
	mapControl:false,//关闭默认的控件
    center: beijing,
    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);
  //将自定义的DIV添加到地图容器
  map.getContainer().appendChild(homeControlDiv);
}

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:500px;height:400px;"></div>
</body>
</html>

运行代码