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

我们项目用的是搜狗地图。使用的是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. 关于ASP.NET MVC中Form Authentication与Windows Authentication的简单理解

    一般互联网应用,如人人网,微博,都是需要用户登录的,如果用户不登陆,就不能使用此网站.所以,这里都是用FormAuthentication,要求用户填写用户名与密码,然后登录成功后,FormAuthe ...

  2. PHP 自学之路-----XML编程（Dom技术）

    上一节,讲了Xml文件基本语法及元素,实体及Dtd约束技术,下面就正式进入PHP的Xml编程 使用PHP技术对Xml文件进行操作 常用的有以下三种技术: 1.PHP dom 2.PHP结合XPath操 ...

  3. Oracle系统工具包(学习笔记)

    Dbms_Output包 No. 子程序名称 描述 1 enable 打开缓冲区,当用户使用 “SET SERVEROUTPUT ON”命令时,自动调用此语句 2 disable 关闭缓冲区,当用户使 ...

  4. 子查询二(在HAVING子句中使用子查询)

    HAVING子句的主要功能是对分组后的数据进行过滤,如果子查询在HAVING中表示要进行分组过滤,一般返回单行单列的数据 示例一.查询部门编号,人数,平均工资,并且要求这些部门的平均工资高于公司的平均 ...

  5. ADS中编译现存项目时常见错误：无法打开文件\…\…\2440init.o的解决办法

    错误提示如下: 解决方法: 重新编译即可.

  6. 笔试题之ejb

    ejb部分 1.EJB是基于哪些技术实现的?并说出SessionBean和EntityBean的区别,StatefulBean和StatelessBean的区别. EJB包括Session Bean. ...

  7. java各种框架的比较，分析

    Spring 框架 优点 1.提供了一种管理对象的方法,可以把中间层的对象有效地组织起来 2.采用了分层结构,可以增量引入到项目中. 3.代码测试较容易 4.非侵入性,应用程序对Spring API的 ...

  8. svn,git,scp,rsync,rake,ssh,wget,axel,aria2,nohup,grep,tail,siege,mitmproxy,ulimit,netstat,lsof

    scp 把本地文件上传到server上 scp -P 1234 config/cert/dev/client.pem dev@xx.xxx.xxx:/srv/rorapps/fgcc/config/c ...

  9. demo02

    class PhoneNumber(): def __init__(self,number): self.a=number[1:4] self.b=number[6:9] self.c=number[ ...

  10. Web服务器（容器）请求常见的错误及其解决方法

    首先我们来看看容器如何找到service()方法?(1)当在浏览器中输入 http://localhost:8080/firstweb/sayHi 这个地址后,容器是如何找到 HelloServlet ...