文档章节

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

白志华
 白志华
发布于 2015/10/18 10:57
字数 625
阅读 14
收藏 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>
       效果图:



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

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

本文转载自:http://blog.csdn.net/xiaoxian8023/article/details/38855281

共有 人打赏支持
白志华
粉丝 31
博文 265
码字总数 57524
作品 0
长沙
程序员
私信 提问
百度地图API显示多个标注点并添加百度样式检索窗口

<%@ page language="java" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"......

zhwj407906450
2014/12/31
0
0
Ext JS 4即将正式发布,值得期待

Ext JS是一个针对Web的UI库。它是市场上的轻量级工具,它通过抽象,支持开发人员不必强制性地编写HTML的源代码,而且允许开发人员灵活的扩展组件库或者通过简单强大的插件架构创建真实的插件...

张金富
2011/11/04
0
2
报表开发工具中开放的部分图表js接口列表

1.. 描述 报表开发工具FineReport 8.0版本中开放了部分图表js接口,在具体应用的过程中很多人都不知道这些接口到底有什么作用,该怎么应用,所以根据我自己的应用在下面归纳了这些新开放js接...

九月你好123
2015/11/13
0
0
掌握这11项技能,你就是优秀的前端开发工程师

导读: 你也许会觉得前端开发是一个很简单的工作,对呀,你就是刚刚从网页设计转型过来的。但当你深入其中时,一定会发现好像前端开发不是那么简单,光网站性能优化、响应式、框架就让你焦头...

半饱即好
06/26
0
0
掌握11项技能,你就是优秀的前端开发工程师

导读: 你也许会觉得前端开发是一个很简单的工作,对呀,你就是刚刚从网页设计转型过来的。但当你深入其中时,一定会发现好像前端开发不是那么简单,光网站性能优化、响应式、框架就让你焦头...

半饱即好
2014/05/14
0
25

没有更多内容

加载失败,请刷新页面

加载更多

Gradle 提速:每天为你省下一杯喝咖啡的时间

摘要: ### 前言 作为一名 Android 开发同学,当你的工程和代码达到一定规模的时候,相信你一定遇到过编译速度过慢的问题。比如: ![](https://user-gold-cdn.xitu.io/2018/11/6/166e7021c0...

阿里云官方博客
8分钟前
0
0
在 PHPStorm 中如何对远程服务使用 xdebug 进行断点调试

1. 安装 xdebug 1.1. 下载、安装 ➜ ~ wget https://xdebug.org/files/xdebug-2.4.1.tgz➜ ~ tar zxf xdebug-2.4.1.tgz➜ ~ cd xdebug-2.4.1➜ ~ phpize➜ ~ ./configure --with-ph......

whoru
10分钟前
0
0
看完这篇文章还不懂Python装饰器?

1、必备 2.需求来了 初创公司有N个业务部门,1个基础平台部门,基础平台负责提供底层的功能,如:数据库操作、redis调用、监控API等功能。业务部门使用基础功能时,只需调用基础平台提供的功...

糖宝lsh
15分钟前
1
0
Bytom合约预编译

比原项目仓库: Github地址:https://github.com/Bytom/bytom Gitee地址:https://gitee.com/BytomBlockchain/bytom 在开发合约的过程中你们有没有遇到一些问题呢?比如编译合约的过程中不能...

比原链Bytom
17分钟前
1
0
supervisor安装配置

supervisor安装配置 安装 wget -c https://files.pythonhosted.org/packages/44/60/698e54b4a4a9b956b2d709b4b7b676119c833d811d53ee2500f1b5e96dc3/supervisor-3.3.4.tar.gztar -zxvf su......

jackmanwu
42分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部