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

我们项目用的是搜狗地图。使用的是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="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>

效果图：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGlhb3hpYW44MDIz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">


       是不是非常easy呢？事实上有了这些，仅仅是一个最简单的样式。在下一篇博文中，我们为他添添彩。敬请期待吧。

GIS（一）——在js版搜索地图上加入Marker标记的更多相关文章

  1. JS版百度地图API

    地图的构建非常简单,官方的API文档也写得很清晰,我只做一总结: 一起jquery,17jquery 一.引入JS :这个很容易理解,既然是调用JS版的百度地图,肯定得引用外部的JS文件了,而这个文件 ...

  2. 个人永久性免费-Excel催化剂功能第94波-地图数据挖宝之搜索地图上的各种兴趣点数据（商铺名、地名、公共设施等）

    终于来到最激动人心的地图应用场景,将地图上的有价值的兴趣点数据一网打尽,全都收录在自己的数据源中,这个价值有多大,想想都兴奋,无数的商业场景可供挖掘,假如你还无动于衷,那要好好反思下自己做的数据分析的 ...

  3. Vue + d3.js实现在地图上选点

    需求:用户在地图上单击选点,页面获取到具体坐标并返回. 首先比较重要的是Vue中的$nextTick,因为vue是异步更新的,如果是想打开Dialog或者是其他操作dom后才加载地图,使用nextTi ...

  4. SU+GIS，让SketchUp模型在地图上活起来

    一.SU+GIS的场景展示 skp与卫星地图和倾斜摄影模型相结合人工模型与实景模型完美融合 这么一看是不是直接秒杀了单纯看看skp后联想的规划效果? 二.如何快速把草图大师的结果和GIS结合呢?在图新 ...

  5. c# 进行AE开发时，如何在地图上定位出一个点

    一.文本形式的气泡提示框 由于本人是初学,所以具体的含义尚未弄清楚,直接给出代码吧!

  6. 从flexible.js引入高德地图谈起的移动端适配

    曾几何时,前端还仅仅是PC端的.随着移动时代的兴起,h5及css3的推陈出新.前端的领域慢慢的由传统的pc端转入了移动端,这也导致了前端这一职业在风口的一段时间出尽了风头. 从开始的惶恐和无从下手,慢 ...

  7. js 调用百度地图，并且定位用户地址，显示省市区街，经纬度

    网上的一些百度地图例子,基本上没有连套的 定位 例子.下面我分享一套我自己弄的,废话不多说,看代码,里面有注释! <!DOCTYPE html> <html> <head ...

  8. 在地图上添加POI

    使用Tangram的Marker, 可以在地图上做各种标记, 效果图: Tangram是通过Marker在地图上添加标记的,Marker分Point, Polyline和Polygon三种, 分别对应 ...

  9. Google Map API v2 （三）----- 地图上添加标记（Marker），标记info窗口，即指定经纬度获取地址字符串

    接上篇 http://www.cnblogs.com/inkheart0124/p/3536322.html 1,在地图上打个标记 private MarkerOptions mMarkOption; ...

随机推荐

  1. Java多线程(1) 创建

    一.线程的生命周期及五种基本状态 关于Java中线程的生命周期,首先看一下以下这张较为经典的图: Java线程具有五中基本状态 新建状态(New):当线程对象对创建后,即进入了新建状态,如:Threa ...

  2. 【技术文档】jeecg3.7-maven搭建好开发环境入门

    JEECG 微云高速开发平台(3.7)Maven版本号手把手入门手冊 官方标准开发工具:1.IDE        Eclipse Java EE IDE for Web Developers.    ...

  3. PHP匿名函数如何理解，什么是匿名函数

    揭秘PHP匿名函数 定义:匿名函数就是没有名字的函数. 有2种形式的匿名函数: 形式1:将一个匿名函数"赋值"给一个变量——此时该变量就代表该匿名函数了! 形式2: 是直接将一个匿 ...

  4. Oracle 删除表中记录 如何释放表及表空间大小

    1.查看一个表所占的空间大小:SELECT bytes/1024/1024 ||'MB' TABLE_SIZE ,u.* FROM USER_SEGMENTS U WHERE U.SEGMENT_NA ...

  5. Linq to Entity调用存储过程【转】

    http://www.cnblogs.com/chenxizhang/archive/2010/01/03/1638201.html

  6. eclipse 如何运行mavenWeb项目

      1.使用maven 首先,在eclipse中,使用maven对项目进行打包: 其次,将项目发布到Tomcat服务器上 说明: demo_WebService2-0.0.1-SNAPSHOT文件夹存 ...

  7. 【Python】学习笔记六：循环

    循环是一个结构,导致一个程序要重复一定的次数 条件循环也一样,当条件变为假,循环结束 For循环 在python for循环遍历序列,如一个列表或一个字符. for循环语法:   ——for iter ...

  8. ActiveMq C#客户端 消息队列的使用（存和取）

    1.准备工具 VS2013Apache.NMS.ActiveMQ-1.7.2-bin.zipapache-activemq-5.14.0-bin.zip 2.开始项目 VS2013新建一个C#控制台应 ...

  9. 开源大数据技术专场（下午）:Databircks、Intel、阿里、梨视频的技术实践

    摘要: 本论坛第一次聚集阿里Hadoop.Spark.Hbase.Jtorm各领域的技术专家,讲述Hadoop生态的过去现在未来及阿里在Hadoop大生态领域的实践与探索. 开源大数据技术专场下午场在 ...

  10. Spring +Mybatis 企业应用实战（脑图）