在js版搜索地图上添加标记

浏览数：29 / 时间：2015年06月09日

由于我们做的是有关于旅游方面的项目，所以涉及到了地图功能。我接到的其中一个任务就是，在地图上显示指定的几个景点，并在地图上加上标记。

我们项目用的是搜狗地图，使用的是js版本。大家有兴趣的话，可以参考搜索地图api以及示例代码。

在地图上添加标记是地图的一个基本功能。这个标记叫做Marker。可以从这里看官网上对于Marker类的介绍。

实现的基本步骤，首先在页面上创建一个地图，然后地图上添加一个marker。你可以对这个marker指定位置、显示内容，在地图上的显隐等。具体请看一下代码：

<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=utf-8"/>
<title>简单标记示例</title>

<link href="css/reset.css" type="text/css" rel="stylesheet" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://api.go2map.com/maps/js/api_v2.5.1.js"></script>
<!-- 定义地图等样式 -->
<style type="text/css">
html {height: auto;}
body {height: auto;margin: 0;padding: 0;}
#map_canvas {width:1000px;height: 600px;position: absolute;}
@media print {#map_canvas {height: 950px;}}
</style>
<script type="text/javascript">
  
  var p;//定义景点坐标数组
  var map;//定义地图对象
  var markers=[];//记录所有景点的Marker信息

  //初始化数据
  function initialize() {
	//将地图定位在海淀区域
    var point = new sogou.maps.Point(12939000,4840250);
    var myOptions = {
      zoom: 11,
      center: point
    }
    //加载并初始化地图
    map = new sogou.maps.Map(document.getElementById("map_canvas"), myOptions);

    //加载景点坐标值
	  loadScenic();
    
    //加载景点标记
    addmarker();
    
  }

  //加载标记 
  function addmarker(){
    for(var i=0;i<p.length;i++){
      var point = new sogou.maps.Point(p[i].x,p[i].y);
      //添加一个图标
      var image = '';//'http://api.go2map.com/maps/images/v2.0/flag.png';
      var marker = new sogou.maps.Marker({
        position: point,
        map: map,
        title:p[i].title,
        icon:image,
        visible:true
      });
      markers.push(marker);
    }
  }

  //加载景点坐标数据
  function loadScenic(){
  	p = [{x:12942902.5,y:4836960.5,title:'颐和园'},
	   	{x:12933625.5,y:4836929.5,title:'香山、植物园'},
	   	{x:12946300.5,y:4839226.5,title:'圆明园遗址公园'},
	   	{x:12948437.5,y:4826035.0,title:'玉渊潭公园'},
	   	{x:12950304.5,y:4829984.0,title:'北京海洋馆'},
	   	{x:12948074.5,y:4829765.0,title:'紫竹院公园'},
	   	{x:12922964.5,y:4853605.5,title:'凤凰岭自然风景区'}];
  }
</script>
</head>
<body onload="initialize()">
  <div id="map_canvas"></div>
</body>
</html>

效果图：