调用Gmaps根据地址显示对应的Google地图（对控件进行隐藏和改变）

最新推荐文章于 2018-04-12 17:31:20 发布

MayMiniFish

最新推荐文章于 2018-04-12 17:31:20 发布

阅读量3.8k

点赞数

分类专栏： java jsp 文章标签： google myeclipse function callback api button

本文链接：https://blog.csdn.net/huakaihualuo1223/article/details/7915091

版权

java 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

jsp

3 篇文章 0 订阅

订阅专栏

我们在做网页的时候可能会用到显示地图，前几天用到Gmaps，对里面的一些控件进行了总结。

有时我们需要用到的要显示的地图可能很小，而google map 上一些默认显示的控件很影响地图查看以及美观，要想达到这种效果就需要对控件进行隐藏和改变，使显示出来的图形，如下图所示

地图中的主要控件：

参考文件地址：https://developers.google.com/maps/documentation/javascript/controls?hl=zh-cn#Adding_Controls_to_the_Map

默认控件集

Google Maps API 提供了以下默认控件：

控件	大屏幕	小屏幕	iPhone	Android
缩放	大型缩放控件，适用于 400x350 像素以上的屏幕	小型缩放控件，适用于 400x350 像素以下的屏幕	不显示。缩放是通过两根手指的开合操作来实现的。	“触摸”式控件
平移	对 400x350 像素以上的屏幕显示	对 400x350 像素以下的屏幕不显示	不显示。平移是通过触摸来实现的。	不显示。平移是通过触摸来实现的。
MapType	水平栏，适用于宽度在 320 像素以上的屏幕	下拉菜单，适用于宽度在 320 像素以下的屏幕	与大屏幕/小屏幕相同	与大屏幕/小屏幕相同
比例	不存在	不存在	不存在	不存在

1.panControl：可启用/停用平移控件。默认情况下，此控件将显示在地图左上角。类型：boolean，形状如图：

2.scaleControl：可启用/停用“比例”控件，该控件可提供一个简单的地图比例尺。默认情况下，不会显示此控件。启用后，它将显示在地图的左下角。类型：boolean,形状如图：

3.mapTypeControl：

可启用/停用“地图类型”控件，该控件允许用户在地图类型（如“地图”和“卫星”）之间切换。默认情况下，此控件将显示在地图右上角。类型：boolean，形状如图：

MapType 控件可显示为以下 style 选项之一：

google.maps.MapTypeControlStyle.HORIZONTAL_BAR，用于在水平栏中将一组控件显示为如 Google Maps 中所示按钮。
google.maps.MapTypeControlStyle.DROPDOWN_MENU，用于显示单个按钮控件，以便您从下拉菜单中选择地图类型。
google.maps.MapTypeControlStyle.DEFAULT，用于显示“默认”的行为，该行为取决于屏幕尺寸，并且可能会在 API 以后的版本中有所变化

4.zoomControl:

可启用/停用缩放控件。默认情况下，此控件将显示在地图左上角。类型：booean

缩放控件可能出现在以下某个 style 选项中：

google.maps.ZoomControlStyle.SMALL，用于显示迷你缩放控件，其中仅限＋和－按钮。此样式适用于小型地图。在触摸设备上，该控件显示为可响应触摸事件的 + 和- 按钮。
google.maps.ZoomControlStyle.LARGE 用于显示标准缩放滑块控件。在触摸设备上，该控件显示为可响应触摸事件的 + 和 - 按钮。
google.maps.ZoomControlStyle.DEFAULT 会按照地图大小和运行地图的设备来挑选合适的缩放控件。

上面的地图在jsp中的代码为：（运行环境为：myeclipse tomcat）

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	
	<title></title>
</head>
<body>
	<input type="text" name="" id="address" /><input type="button" value="显示地图" id="btn" />
	<div id="map" style="width:200px;height:250px;border: 1px solid #DDDDDD">
		
    </div>
    <script src="js/jquery.js" type="text/javascript"></script>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
	<script type="text/javascript" src="https://raw.github.com/HPNeo/gmaps/master/gmaps.js"></script>
    <script type="text/javascript">
		var map;
		$(document).ready(function(){
			
			map = new GMaps({
				div: "#map",
				lat: 35.2193612,
				lng: 113.2482923,
				zoom:13,
				zoomControl: true,
				zoomControlOptions: {
					style: google.maps.ZoomControlStyle.SMALL,
				},
				panControl: false,
				scaleControl:false,
				mapTypeId: google.maps.MapTypeId.ROADMAP,
				mapTypeControl: false
			});
			
			$("#btn").click(function(){
				GMaps.geocode({
				  address: $("#address").val(),
				  callback: function(results, status) {
					if (status == 'OK') {
					  var latlng = results[0].geometry.location;
					  map.setCenter(latlng.lat(), latlng.lng());
					  map.addMarker({
						lat: latlng.lat(),
						lng: latlng.lng()
					  });
					}
				  }
				});
			});
			
			
			
		});
    </script>
</body>
</html>

MayMiniFish

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
调用Gmaps根据地址显示对应的Google地图（对控件进行隐藏和改变）

我们在做网页的时候可能会用到显示地图，前几天用到Gmaps，对里面的一些控件进行了总结。有时我们需要用到的要显示的地图可能很小，而google map 上一些默认显示的控件很影响地图查看以及美观，要想达到这种效果就需要对控件进行隐藏和改变，使显示出来的图形，如下图所示地图中的主要控件：参考文件地址：https://developers.google.com/maps/d
复制链接

扫一扫