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

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

我们项目用的是搜狗地图，使用的是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 οnlοad="initialize()"><div id="map_canvas"></div>
</body>
</html>

效果图：

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

GIS（一）——在js版搜索地图上添加Marker标记相关推荐

GIS（二）——在js版搜狗地图上添加brand标牌
在上一篇博文中,我在搜狗地图上添加了Marker标记,但是在用户体验度上还是不够的,如果想了解某些信息,你得把鼠标指向marker,才能看到title里的值.有没有一种可以直接显示在marker上的东 ...
android高德marker添加点击,高德地图上添加marker，给每一个marker添加点击事件。...
高德地图上添加marker,给每一个marker添加点击事件. 高德地图上添加marker,给每一个marker添加点击事件.javascript var watch = [] $.ajax({ ty ...
超图js版本在地图上使用图标标记地理点
效果: 项目结构: 代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ma ...
GIS（四）——为js版搜狗地图添加边界+Marker和Brand的最终美化版
在<GIS(三)--优化js版搜狗地图的brand标牌样式>中,分享了一下Brand样式的修改.现在把这几次Marker和Brand的修改统一再美化一下,算作一个终极优化版吧. 这次优化的 ...
使用Python调用百度地图的API在地图上添加标记
写在前面近期博主工作太忙,快一个月没更新博客.今天跑了大半天的腿,被一堆破事儿弄的无比憋屈,写篇博客调节一下心情. 博主的目的是在地图上做一些标记,然后保存为html网页文件,这样方便我的软件调用, ...
GIS（六）——实现js版搜狗地图周边搜索功能
在上一篇文章<GIS(五)--完成js版搜狗地图基本交互搜索功能>中,介绍了搜狗地图的关键字搜索功能,今天就实现以下另一个重要功能吧--那就是周边搜索功能. 按照惯例,还是把官网上的示例代 ...
GIS（五）——完成js版搜狗地图基本交互搜索功能
最近在做的有关于北京海淀智慧旅游的一个项目,既然是旅游项目,那么涉及到地图的操作也就是必然的事情了.前几篇文章,主要是分享了在地图上标记多个景点及其景点信息的技术.其实跟项目中还是有一些不一样的.项目 ...
网页版谷歌地图上标记多个点_Google正式放弃Beta版标记
网页版谷歌地图上标记多个点 As we predicted on SitePoint three days ago, Google has quietly dropped the "beta ...
vue 给圆遮盖物添加文字高德地图_通过 Vue + 高德地图 JS API 在地图上标记咖啡店...
通过 Vue + 高德地图 JS API 在地图上标记咖啡店由学院君创建于2年前, 最后更新于 2年前版本号 #1 在上一篇教程中我们为咖啡店地址进行了地理编码,这样,就可以调用高德地图支持的 ...

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

GIS（一）——在js版搜索地图上添加Marker标记相关推荐

最新文章

热门文章