當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發(fā)布時間：2023/12/20 编程问答 20 豆豆

生活随笔收集整理的這篇文章主要介紹了调用Gmaps根据地址显示对应的Google地图（对控件进行隐藏和改变）小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

我們在做網(wǎng)頁的時候可能會用到顯示地圖，前幾天用到Gmaps，對里面的一些控件進行了總結(jié)。

有時我們需要用到的要顯示的地圖可能很小，而google map 上一些默認(rèn)顯示的控件很影響地圖查看以及美觀，要想達(dá)到這種效果就需要對控件進行隱藏和改變，使顯示出來的圖形，如下圖所示

地圖中的主要控件：

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

默認(rèn)控件集

Google Maps API 提供了以下默認(rèn)控件：

控件大屏幕小屏幕 iPhone Android

縮放	大型縮放控件，適用于 400x350 像素以上的屏幕	小型縮放控件，適用于 400x350 像素以下的屏幕	不顯示。縮放是通過兩根手指的開合操作來實現(xiàn)的。	“觸摸”式控件
平移	對 400x350 像素以上的屏幕顯示	對 400x350 像素以下的屏幕不顯示	不顯示。平移是通過觸摸來實現(xiàn)的。	不顯示。平移是通過觸摸來實現(xiàn)的。
MapType	水平欄，適用于寬度在 320 像素以上的屏幕	下拉菜單，適用于寬度在 320 像素以下的屏幕	與大屏幕/小屏幕相同	與大屏幕/小屏幕相同
比例	不存在	不存在	不存在	不存在

1.panControl：可啟用/停用平移控件。默認(rèn)情況下，此控件將顯示在地圖左上角。類型：boolean，形狀如圖：

2.scaleControl：可啟用/停用“比例”控件，該控件可提供一個簡單的地圖比例尺。默認(rèn)情況下，不會顯示此控件。啟用后，它將顯示在地圖的左下角。類型：boolean,形狀如圖：

3.mapTypeControl：

可啟用/停用“地圖類型”控件，該控件允許用戶在地圖類型（如“地圖”和“衛(wèi)星”）之間切換。默認(rèn)情況下，此控件將顯示在地圖右上角。類型：boolean，形狀如圖：

MapType 控件可顯示為以下?style?選項之一：

google.maps.MapTypeControlStyle.HORIZONTAL_BAR，用于在水平欄中將一組控件顯示為如 Google Maps 中所示按鈕。
google.maps.MapTypeControlStyle.DROPDOWN_MENU，用于顯示單個按鈕控件，以便您從下拉菜單中選擇地圖類型。
google.maps.MapTypeControlStyle.DEFAULT，用于顯示“默認(rèn)”的行為，該行為取決于屏幕尺寸，并且可能會在 API 以后的版本中有所變化

4.zoomControl:

可啟用/停用縮放控件。默認(rèn)情況下，此控件將顯示在地圖左上角。類型：booean

縮放控件可能出現(xiàn)在以下某個?style?選項中：

google.maps.ZoomControlStyle.SMALL，用于顯示迷你縮放控件，其中僅限?＋?和?－?按鈕。此樣式適用于小型地圖。在觸摸設(shè)備上，該控件顯示為可響應(yīng)觸摸事件的?+?和-?按鈕。
google.maps.ZoomControlStyle.LARGE?用于顯示標(biāo)準(zhǔn)縮放滑塊控件。在觸摸設(shè)備上，該控件顯示為可響應(yīng)觸摸事件的?+?和?-?按鈕。
google.maps.ZoomControlStyle.DEFAULT?會按照地圖大小和運行地圖的設(shè)備來挑選合適的縮放控件。

上面的地圖在jsp中的代碼為：（運行環(huán)境為：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>

總結(jié)

以上是生活随笔為你收集整理的调用Gmaps根据地址显示对应的Google地图（对控件进行隐藏和改变）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。