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

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

    http://www.plutinosoft.com/platinum http://blog.csdn.net/lancees/article/details/9178385 Note that P ...

  2. NSDate 时区转换问题

    一: NSDateFormatter *dateFormater = [[NSDateFormatter alloc]init]; [dateFormater setDateFormat:@" ...

  3. Struts2（三）更改字符编码

    一.导入包和struts配置文件 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE stru ...

  4. cp 命令（转）

    原文:http://www.cnblogs.com/peida/archive/2012/10/29/2744185.html cp命令用来复制文件或者目录,是Linux系统中最常用的命令之一.一般情 ...

  5. JavaScript二(第一个js程序)

    一.<script>xxxx</script>标签解析 1.charset :可选,表示通过src属性指定的字符集,由于大多数浏览器忽略它,所以很少有人用它2.defer:可选 ...

  6. VB中如何修改treeview的背景色

    改变 TreeView 的背景    Private Declare Function SendMessage Lib "User32" Alias "SendMessa ...

  7. Emmet初探2

    关于Emmet Emmet插件的前身是Zen coding,可以大幅度提高前端开发效率的一个工具,也有人说类似于jade(高性能的模板引擎,它深受 Haml 影响,它是用 JavaScript 实现的 ...

  8. 在命令行上 使用 mutt, fetchmail, maildrop, msmtp 收发邮件

    基于shell 现在已经有了 Mail.app, Thunderbird, Outlook 这些图形化工具能很方便的处理邮件,为啥还需要 mutt 这种命令行文本方式的邮件工具呢?mutt 的一个优势 ...

  9. eclipse 将javaWeb项目转化成maven项目

      eclipse 将javaWeb项目转化成maven项目 CreateTime--2018年4月18日16:04:18 Author:Marydon 1.首先,maven项目的标准目录 2.web ...

  10. 关于LoadRunner的迭代

    通过用lr做负载压力测试过程发现,如果设定不同的action迭代次数,每次得出的结果是不同的,曲线的表现形式也是不同的.这点就使我们会感觉困惑,为什么要设置action的迭代次数?以及对于不同的应用系 ...