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

我们项目用的是搜狗地图。使用的是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. PyQt5教程——对话框（6）

    PyQt5中的对话框 对话框窗口或对话框是大多数主流GUI应用不可缺少的部分.对话是两个或更多人之间的会话.在计算机应用中,对话框是一个用来和应用对话的窗口.对话框可以用来输入数据,修改数据,改变应用 ...

  2. POJ 1436 Horizontally Visible Segments (线段树&#183;区间染色)

    题意   在坐标系中有n条平行于y轴的线段  当一条线段与还有一条线段之间能够连一条平行与x轴的线不与其他线段相交  就视为它们是可见的  问有多少组三条线段两两相互可见 先把全部线段存下来  并按x ...

  3. IntelliJ IDEA 注册码失效

    破解补丁无需使用注册码,下载地址:http://idea.lanyus.com/jar/JetbrainsCrack-2.6.2.jar idea14 keygen下载地址:http://idea.l ...

  4. IntelliJ IDEA 2017.2.2 的破解 有效期 2116年

      破解三部曲 下载破解文件 JetbrainsCrack-2.6.6-release-enc.jar http://idea.lanyus.com/jar/JetbrainsCrack-2.6.6- ...

  5. 使用JDK自带的JAXB进行类和xml的互转

    Classroom.java public class Classroom { private int id; private String name; private int grade; publ ...

  6. Web Service——CXF+Spring 整合

    结合spring框架来实现CXF发布SOAP协议的服务,步骤基本相同,所不同的是的多了一些配置项,步骤如下 1. 服务端 第一步:创建web项目(引入jar包) 第二步:创建SEI接口 import ...

  7. 【LeetCode】129. Sum Root to Leaf Numbers (2 solutions)

    Sum Root to Leaf Numbers Given a binary tree containing digits from 0-9 only, each root-to-leaf path ...

  8. PHP 大数自动转换为科学计数法

    前段时间碰到一个很头疼的问题,就是大于12位的数字在PHP中,会自动转成科学计数法表 示. 比如 1234567891234 显示为 1.23456789123E+12 , 最后只能在计算出大数之后, ...

  9. Oracle SQL Developer，Oracle 开发工具之toad、SQL Developer、PL/SQL Developer等比较

    参考: oracle 的几个开发工具比较 因Oracle几乎是中大型商业企业数据的首选,所以比较一下常用与Oracle的工具. Oracle SQL Developer 免费,一般开发使用足矣,常用. ...

  10. 我认为比较有用的快捷键（Eclipse）

    http://hi.baidu.com/%D4%AD%CA%BC%C1%F7%C0%CB%D5%DF/blog/item/e497b94dd1b0b92daec3ab36.html 我认为比较有用的快 ...