🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
     由于我们做的是有关于旅游方面的项目,所以涉及到了地图功能。我接到的其中一个任务就是,在地图上显示指定的几个景点,并在地图上加上标记。      我们项目用的是搜狗地图,使用的是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> ~~~      效果图: ![](https://box.kancloud.cn/2016-02-18_56c53c218d2e8.jpg)      是不是很简单呢?其实有了这些,只是一个最简单的样式。在下一篇博文中,我们为他添添彩。敬请期待吧。