OpenLayers的使用(google地图)-程序员宅基地

技术标签: Google  ViewUI  CSS  企业应用  JavaScript  HTML  Mobile  

要使用google地图,先要获得google的密钥,可以使用了之后,我们就可以通过OpenLayers来操作,对google地图进行布局,增加事件什么的。下面就是一个简单的例子,类似定位。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<html>
<head>
<title>Test OpenLayers</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAiaPj-nq6xmaIlKL7JGMDMBQuGyTEa3GqgqWF5HGZOViJUH6UdRSMFvsEDx1rNkGSOnD2AI7xXht7xg'></script>

<script src="<%=request.getContextPath()%>/js/openlayers/lib/OpenLayers.js"></script>
<script defer="defer" type="text/javascript">
var map;

function setMarker(point, name_mobile,info){
	var mobile = name_mobile.split(',')[0];
	var name = name_mobile.split(',')[1];
	var markers = new OpenLayers.Layer.Markers( "Markers" );
	map.addLayer(markers);
    var lonLatMarker = point;
    var feature = new OpenLayers.Feature(markers, lonLatMarker);
    feature.closeBox = true;
    feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {minSize: new OpenLayers.Size(200, 200),maxSize: new OpenLayers.Size(280, 280) });
    feature.data.popupContentHTML = "<div style='font-size:.8em'>"+mobile+"("+name+")"+"位于:<br/>"+info+"</div><p/><center><img style='vertical-align: middle;' src='<%=request.getContextPath()%>/img/tools/button_legend.gif'/><a class='menu_font2' href='###' οnclick='javascript:sendsms("+"\""+name_mobile+"\""+");'>短信</a></center>";
    feature.data.overflow = "hidden";
	size = new OpenLayers.Size(50,50);
	calculateOffset = function(size) {return new OpenLayers.Pixel(-(size.w/2), -size.h); };
	icon = new OpenLayers.Icon('<%=request.getContextPath()%>/img/msn.png',size, null,calculateOffset);
    var marker = new OpenLayers.Marker(lonLatMarker, icon);
    marker.feature = feature;
	popup = feature.createPopup(true);
	map.addPopup(popup);
	popup.show();
    var markerClick = function(evt) {
        if (this.popup == null) {
            this.popup = this.createPopup(this.closeBox);
            map.addPopup(this.popup);
            this.popup.show();
        } else {
            this.popup.toggle();
        }
        OpenLayers.Event.stop(evt);
    };
    marker.events.register("mousedown", feature, markerClick);

    markers.addMarker(marker);
}

function init() {

	map = new OpenLayers.Map('map', {allOverlays: true});
//    map.addControl(new OpenLayers.Control.LayerSwitcher());
    
    var gmap = new OpenLayers.Layer.Google(
        "Google Streets", // the default
        {numZoomLevels: 20}
    );
    map.addLayer(gmap); 

    vlayer = new OpenLayers.Layer.Vector("Editable");
    map.addLayer(vlayer);
    
    map.addControl(new OpenLayers.Control.MousePosition());       
	map.addControl(new OpenLayers.Control.OverviewMap());
	map.addControl(new OpenLayers.Control.PanZoomBar());
	map.addControl(new OpenLayers.Control.EditingToolbar(vlayer));
	
		 
    map.setCenter(new OpenLayers.LonLat(114.062, 22.54), 12);
    setMarker(new OpenLayers.LonLat(114.062, 22.54),"12510827609,hhw","西丽");
	/* 
  	var markers = new OpenLayers.Layer.Markers( "Markers" );
	map.addLayer(markers);

	var icon = new OpenLayers.Icon('<%=request.getContextPath()%>/img/mobile.png'); 
	var icon = new OpenLayers.Icon('<%=request.getContextPath()%>/img/mobile.png');
	markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(113.96052,22.59158),icon));
	markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(114.062, 22.54),icon.clone()));
 	*/
}

</script>
<style type="text/css">
#map {
    width: 100%;
    height: 100%;
    border: 2px solid black;
    background-color: #FFFFFF;
}
</style>
</head>
<body οnlοad="init()">
    <h1>OpenLayers Test</h1>
    <table width="100%" height="400">
    <tr><td width="100%" height="100%">
    <div id="map"></div>
    </td></tr>
    </table>
</body>
</html>
 
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/libinxuan520/article/details/83844191

智能推荐

.netcore入门9:aspnetcore从命令行读取配置及运行时配置行为(Development、Staging、Production)_.netcore运行时-程序员宅基地

文章浏览阅读620次。参考文章:https://docs.microsoft.com/zh-cn/aspnet/core/fundamentals/configuration/?view=aspnetcore-3.1#command-line-configuration-providerhttps://docs.microsoft.com/zh-cn/aspnet/core/fundamentals/enviro..._.netcore运行时

查看ES版本号(Elasticsearch)-程序员宅基地

文章浏览阅读2.1k次。记录下说明:Elasticsearch 是一个分布式、高扩展、高实时的搜索与数据分析引擎。它能很方便的使大量数据具有搜索、分析和探索的能力。充分利用Elasticsearch的水平伸缩性,能使数据在生产环境变得更有价值。Elasticsearch 的实现原理主要分为以下几个步骤,首先用户将数据提交到Elasticsearch 数据库中,再通过分词控制器去将对应的语句分词,将其权重和分词结果一并存入数据,当用户搜索数据时候,再根据权重将结果排名,打分,再将返回结果呈现给用户。Elasticsearch是._es版本号

C语言中遇见Conflicting types for ‘ ‘类型说明什么(大学生)_conflicting types for 'p-程序员宅基地

文章浏览阅读4.8k次,点赞5次,收藏4次。实例我学校的编程课用的是这本教材The.C.Programming.Language.2Nd.Ed。Prentice.Hall.Brian.W.Kernighan.and.Dennis.M.Ritchie.增删改补是这本书的精华所在,谭浩强先生的书更偏向数学逻辑。The.C.Programming.Language.这本书它采用的是C89规则由于函数库中含有子函数的名称,写实验报告时将给的子函数套用主函数后,会出现Conflicting types for ’ '类型的错误这个时候我们_conflicting types for 'p

CSAPP实验-DadaLab_csapp 所有实验-程序员宅基地

文章浏览阅读1k次。简介csapp的datalab配套实验, 要求修改bits.c源文件使所有给定函数满足功能并通过btest的所有测试用例,每个实现函数内均对使用的运算符种类和数量有所限制,可以用dlc程序进行检查。该实验主要为了强化理解整形和浮点型数据的编码形式和位运算相关知识。实验内容bitXor实现异或操作/* * bitXor - x^y using only ~ and & * ..._csapp 所有实验

Tomcat 连接池的配置-程序员宅基地

文章浏览阅读98次。转录笔记:不过遗憾的是,如下几种方法都没有在我的机器上配置成功(Tomcat5.5.17 + WinXPSP2)。正确配置见我自己的评论,Tomcat 的日志中没发现什么错误,看上去都很正常,但是测试程序却老是提示同样的错误:Error occurred:org.apache.tomcat.dbcp.dbcp.SQLNestedException: Cannot create JDBC drive..._tomcat xianchenchi

Java 9 逆天的十大新特性_java最新版本是几-程序员宅基地

文章浏览阅读110次。在介绍java9之前,我们先来看看java成立到现在的所有版本。1990年初,最初被命名为Oak;1995年5月23日,Java语言诞生;1996年1月,第一个JDK-JDK1.0诞生;1996年4月,10个最主要的操作系统供应商申明将在其产品中嵌入Java技术;1996年9月,约8.3万个网页应用了Java技术来制作;1997年2月18日,JDK1.1发布;1997年4月2日,JavaOne会议召开,参与者逾一万人,..._java最新版本是几

随便推点

Java图书管理系统-图书借阅系统 JSP-JSTL-Mysql(可作为毕业设计)_图书管理系统学生借书数量怎么更新jsp-程序员宅基地

文章浏览阅读1.5k次,点赞4次,收藏20次。Java图书管理系统-图书借阅系统 JSP-JSTL-Mysql_图书管理系统学生借书数量怎么更新jsp

大数据时代_手中有大量数据,但没有利用好说的是-程序员宅基地

文章浏览阅读3.3k次,点赞5次,收藏14次。大数据时代概述最早提出“大数据”时代到来的是全球知名咨询公司麦肯锡,麦肯锡称:“数据,已经渗透到当今每一个行业和业务职能领域,成为重要的生产因素。人们对于海量数据的挖掘和运用,预示着新一波生产率增长和消费者盈余浪潮的到来。”随着互联网快速发展、智能手机以及“可佩带”计算设备的出现,我们的行为、位置,甚至身体生理数据等每一点变化都成为了 可被记录和分析的数据。这些新技术推动着大数据时代的来临..._手中有大量数据,但没有利用好说的是

卡片 -蓝桥 -java_卡片蓝桥java-程序员宅基地

文章浏览阅读301次。卡片最大运行时间:1s最大运行内存: 128M题目描述:小蓝有很多数字卡片,每张卡片上都是数字 0 到 9。 小蓝准备用这些卡片来拼一些数,他想从 1 开始拼出正整数,每拼一个, 就保存起来,卡片就不能用来拼其它数了。 小蓝想知道自己能从 1 拼到多少。 例如,当小蓝有 30 张卡片,其中 0 到 9 各 3 张,则小蓝可以拼出 1 到 10, 但是拼 11 时卡片 1 已经只有一张了,不够拼出 11。 现在小蓝手里有 0 到 9 的卡片各 2021 张,共 20210 张,请问小蓝可以从 1 _卡片蓝桥java

支付网关和api网关_将您的钱放在鼠标所在的位置:已审查6个支付网关-程序员宅基地

文章浏览阅读3.9k次。支付网关和api网关So you’re starting your own ecommerce Website? Good for you! But you have many decisions to make. Do you write your own shopping cart or use an existing one? Who should be your merchant acco..._make pay gateway

network namespace与veth pair_如何查看veth归属哪个namespace-程序员宅基地

文章浏览阅读1.2w次。network namespace创建network namespace# ip netns add blue# ip netns listblue 添加网口到namespace先创建veth# ip link add veth0 type veth peer name veth1在当前namespace可以看到veth0和veth1# ip link _如何查看veth归属哪个namespace

LeetCode1-540题汇总,希望对你有点帮助!-程序员宅基地

文章浏览阅读239次。时间很快,公众号发布的LeetCode题目,已经达到520道题了。今天把发布的1-520篇LeetCode文章整理一下,平时文章都放在比较末尾,阅读量都不高,相信很多人都没看过,如果对于算..._leetcode1-540题汇总,希望对你有点帮助!

推荐文章

热门文章

相关标签