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

我们项目用的是搜狗地图。使用的是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. html5调用摄像头实现拍照

    技术时刻都在前进着.我们的需求也是时刻在改变着.最近在开发中遇到了用户进行账号注册时需要个人图像,网站提供自动拍照功能.还有在登录了PC之后,手机端进行登录时只需要扫描一下PC上的二维码就可以登录.这 ...

  2. Memcachedclient-XMemcached使用

    一. XMemcached 简单介绍 XMemcached 是一个新 java memcached client . 或许你还不知道 memcached 是什么?能够先看看这里.简单来说, Memca ...

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

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

  4. python之函数用法xrange()

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #python之函数用法xrange() #xrange() #说明:返回一个生成器 #xrange做循环的性 ...

  5. 修改模块搜索路径(注意：py运行完毕，就会失效，他只是临时产生效果)

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #修改模块搜索路径(注意:py运行完毕,就会失效,他只是临时产生效果) import sys print sy ...

  6. Linux 调优方案， 修改最大连接数-ulimit

    Linux对于每个用户,系统限制其最大进程数.为提高性能,可以根据设备资源情况,设置各linux 用户的最大进程数 可以用ulimit -a 来显示当前的各种用户进程限制.下面我把某linux用户的最 ...

  7. PHP中的一些安全配置

    PHP中的配置至关重要,包含php.ini的配置,还有系统权限的配置,一下是我总结的一些配置 一.PHP的模块 ./configure \ --with-libdir=lib64 \ --prefix ...

  8. HDUOJ----4006The kth great number(最小堆...)

    The kth great number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65768/65768 K (Java/Oth ...

  9. Block编程注意的问题

    一,前言   block 是在 iOS 4 中引入的新特性,它和 C++ 11 中的 lamba 表达式概念相似,有时候也被称为闭包.经过一段时间的使用,我发现要用对用好 block 还是有不少需要注 ...

  10. iOS 网络编程 TCP/UDP HTTP

    一.HTTP协议的主要特点: 1. CS模式 2. 简单快速:只需要传送请求方法和路径.(常用方法有GET,HEAD,POST) 3. 灵活:任意对象都可以,类型由Content-Type加以标记 4 ...