文档章节

GIS(一)——在js版搜索地图上添加Marker标记

白志华
 白志华
发布于 2015/10/18 10:57
字数 625
阅读 13
收藏 0
点赞 0
评论 0

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

       我们项目用的是搜狗地图,使用的是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>
       效果图:



       是不是很简单呢?其实有了这些,只是一个最简单的样式。在下一篇博文中,我们为他添添彩。敬请期待吧。

版权声明:本文为博主原创文章,未经博主允许不得转载。

© 著作权归作者所有

共有 人打赏支持
白志华
粉丝 29
博文 260
码字总数 57524
作品 0
长沙
程序员
WEB GIS 开发框架 mapbox-gl-js v0.46.beta1 发布

WEB GIS 开发框架 mapbox-gl-js v0.46.beta1 已发布。 Mapbox GL JS 是一个 JavaScript 库,使用 WebGL 渲染交互式矢量瓦片地图和栅格瓦片地图。WebGL 渲染意味着高性能,MapboxGL 能够渲染大...

达尔文 ⋅ 06/15 ⋅ 0

hi-nginx-1.4.9 正式发布,支持 Javascript 后端开发

hi-nginx-1.4.9已经发布。 更新: 支持javascript后端开发 修复脚本搜索的一个bug 从这一版开始,hi-nginx开始支持javascript,这意味着把javascript应用于后端开发,将不再只有nodejs这唯一...

所以呢 ⋅ 05/14 ⋅ 0

JS 底蕴之 变量、作用域和垃圾回收

基本类型和引用类型 在 JavaScript 中,数据类型可分为基本类型和引用类型, 基本类型有六种:Null,Undefined,String,Boolean,Number,Symbol; 而引用类型就是传说中的 Object 了。 其中...

Fly_001 ⋅ 05/23 ⋅ 0

云 GIS 网络客户端开发平台 - iClient-JS

SuperMap iClient JavaScript (简称 iClient-JS )是云 GIS 网络客户端开发平台。基于现代 Web 技术栈全新构建,是 SuperMap 云四驾马车和在线 GIS 平台系列产品的统一 JS 客户端。集成了领先...

ahnan ⋅ 2017/12/04 ⋅ 5

JavaScript零基础入门——(八)JavaScript的数组

JavaScript零基础入门——(八)JavaScript的数组 欢迎大家回到我们的JavaScript零基础入门,上一节课我们讲了有关JavaScript正则表达式的相关知识点,便于大家更好的对字符串进行处理。这一...

JandenMa ⋅ 昨天 ⋅ 0

DOM系列:浏览器与DOM 主标签

最近回过头来在学习JavaScript中的DOM知识,随着学习进度的向前推移,越发感觉DOM知识点较多。为了能更好的系统了解清楚DOM相关的知识,我打算重新将DOM的学习划入到DOM系列当中。那么今天将...

一个敲代码的前端妹子 ⋅ 05/28 ⋅ 0

开源书籍-JavaScript 编程精解

《JavaScript 编程精解》(Eloquent JavaScript)第三版,是由马尔奇·哈弗贝克(Marlin Haverbeke)JavaScript程序员编写的JS入门书籍,Marlin Haverbeke通晓多种编程语言,在Web开发方面积累...

marsdream ⋅ 06/04 ⋅ 0

干货 | 3D GIS 应用开发 —— 基于 Mapbox GL 的实践

摘要:下面我们从这个项目一步步来介绍 Mapbox 的前端 GIS 引擎 Mapbox GL JS.首先,Mapbox 在地图领域是一家很 Newbee 的公司。已为 Foursquare、Pinterest、Evernote、金融时报、天气频道、...

创宇前端 ⋅ 01/11 ⋅ 0

[译] JavaScript 是如何工作的:对比 WebAssembly + 为什么在某些场景下它比 JavaScript 更合适

原文地址:How JavaScript works: A comparison with WebAssembly + why in certain cases it’s better to use it over JavaScript 原文作者:Alexander Zlatkov 译文出自:掘金翻译计划 本......

stormluke ⋅ 05/23 ⋅ 0

前端学习之路(从入门到入坑...)

学习前端两年多了,拿了阿里巴巴实现offer,想结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限,不能保证面面俱到,只是作为入门参考...

阿小庆 ⋅ 06/14 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Mahout推荐算法API详解

前言 用Mahout来构建推荐系统,是一件既简单又困难的事情。简单是因为Mahout完整地封装了“协同过滤”算法,并实现了并行化,提供非常简单的API接口;困难是因为我们不了解算法细节,很难去根...

xiaomin0322 ⋅ 13分钟前 ⋅ 0

WampServer默认web服务器根目录位置

安装WampServer之后的web服务器根目录默认位置在WampServer安装目录下的www:

临江仙卜算子 ⋅ 15分钟前 ⋅ 0

Redux的一些手法记录

Redux Redux的基本概念见另一篇文。 这里记录一下Redux在项目中的实际操作的手法。 actions 首先定义action.js,actions的type,可以另起一个action-type.js文件。 action-type.js用来存...

LinearLaw ⋅ 16分钟前 ⋅ 0

android 手势检测(左右滑动、上下滑动)

GestureDetector类可以让我们快速的处理手势事件,如点击,滑动等。 使用GestureDetector分三步: 1. 定义GestureDetector类 2. 初始化手势类,同时设置手势监听 3. 将touch事件交给gesture...

王先森oO ⋅ 30分钟前 ⋅ 0

java 方法的执行时间监控 设置超时(Future 接口)

java 方法的执行时间监控 设置超时(Future 接口) import java.util.concurrent.Callable; import java.util.concurrent.ExecutionException; import java.util.concurrent.Executor......

青峰Jun19er ⋅ 35分钟前 ⋅ 0

一名开源小白的Apache成长自述

今天收到了来自Apache Vote我成为Serviceomb项目Committer的邮件,代表自己的贡献得到了充分的肯定;除了感谢团队的给力支持,我更希望将自己的成长经历——如何践行Apache Way的心得介绍给大...

微服务框架 ⋅ 37分钟前 ⋅ 0

vim介绍、颜色显示和移动光标、一般模式下复制、剪切和粘贴

1.vim 是 vi 的升级版 vim 是带有颜色显示的 mini安装的系统,一般都不带有vim [root@aminglinux-128 ~]# yum install -y vim-enhanced已加载插件:fastestmirror, langpacksLoading mir...

oschina130111 ⋅ 37分钟前 ⋅ 0

Deepin 操作系统四面楚歌

作为国内做的最好的 Linux 发行版,源自 Debian sid 的 Deepin 目前正面临重重困境,新版本不断延期,开发人员离职,bug 长期得不到修复,和 Debian/Ubuntu 的兼容性问题也面临越来越严重的挑...

六库科技 ⋅ 37分钟前 ⋅ 0

MyBatis之动态sql

我们需要知道的是,使用mybatis重点是对sql的灵活解析和处理。在原先的UserMappser.xml中,我们这样查询表中满足条件的记录 : 123 <select id="findUserList" parameterType="userQuery...

瑟青豆 ⋅ 38分钟前 ⋅ 0

这届俄罗斯世界杯的冷门那么多怎么办?

最纯粹的世界杯,最神奇的大冷门。 德国0比1被墨西哥摩擦了。 日本历史性的赢了哥伦比亚。 C罗也挑平了西班牙。 梅西被冰岛狮吼吼愣神了。 就连11次进世界杯4强的巴西也被瑞士逼平了。 天台已...

开源中国众包平台 ⋅ 38分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部