? ? ?由于我們做的是有關于旅游方面的項目，所以涉及到了地圖功能。我接到的其中一個任務就是，在地圖上顯示指定的幾個景點，并在地圖上加上標記。
? ? ?我們項目用的是搜狗地圖，使用的是js版本。大家有興趣的話，可以參考[搜索地圖api](http://map.sogou.com/api/documentation/javascript/api2.5/reference.html)以及[示例代碼](http://map.sogou.com/api/documentation/javascript/api2.5/examples/index.html)。
? ? ?在地圖上添加標記是地圖的一個基本功能。這個標記叫做Marker。可以從[這里](http://map.sogou.com/api/documentation/javascript/api2.5/reference.html#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="http://mfxuan.free.800m.net/blogCss/reset.css" type="text/css" rel="stylesheet" />
<link href="http://mfxuan.free.800m.net/blogCss/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>
~~~
? ? ?效果圖：
? ? ?是不是很簡單呢？其實有了這些，只是一個最簡單的樣式。在下一篇博文中，我們為他添添彩。敬請期待吧。
