OpenLayers的使用(google地图)

最新推荐文章于 2024-02-20 09:36:57 发布

平民-王子

最新推荐文章于 2024-02-20 09:36:57 发布

阅读量145

点赞数

分类专栏：企业应用文章标签： Google Mobile JavaScript CSS HTML ViewUI

本文链接：https://blog.csdn.net/libinxuan520/article/details/83844191

版权

企业应用专栏收录该内容

12 篇文章 0 订阅

订阅专栏

要使用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>