google map api v3实现将多个标注展示在最佳视野

来源：互联网发布：网络平台运维监控系统编辑：程序博客网时间：2024/06/04 19:47

由于最近在做一个要切换百度地图和谷歌地图的双地图应用，一开始做的是百度地图，要做一个可以在最佳视野展示标注的效果，用到了百度地图的setVeiwport，其实google地图也有类似的类可以实现，这里要用到LatLngBounds这个类，官方API说明为：LatLngBounds 实例代表通过地理坐标表示的矩形，包含与 180 度子午线相交的矩形。该类通过extend((point:LatLng)添加位置信息，最后通过map.fitBounds(bounds:LatLngBounds)来让地图适应该bounds下面的点集，从而达到展示标注在最佳视野的效果。

以下为简单示例（替换google key 就可以运行）：

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=YOURKEY&sensor=FALSE"></script><script src="jquery.min.js" type="text/javascript"></script><script type="text/javascript">var googleMapOperation = function() {//设置四个位置，用于展示var points = [                             new google.maps.LatLng(37.772323, -122.214897),                             new google.maps.LatLng(21.291982, -157.821856),                             new google.maps.LatLng(-18.142599, 178.431),                             new google.maps.LatLng(-27.46758, 153.027892)                           ];var myOptions = {zoom : 8,center : new google.maps.LatLng(39.915, 116.404),mapTypeId : google.maps.MapTypeId.ROADMAP};//添加mapgmap = new google.maps.Map(document.getElementById("mainMap"),myOptions);markers = [];//添加四个标注，并将其存入数组marker[]for(var i = 0;i<points.length;i++){var gmarker = new google.maps.Marker({position : points[i],map : gmap,});markers.push(gmarker);} //调用函数实现功能要求setVeiwPort();};//展示最佳视野的函数var setVeiwPort = function () {var bounds = new google.maps.LatLngBounds();//读取标注点的位置坐标，加入LatLngBoundsfor(var i = 0;i < markers.length;i++){bounds.extend(markers[i].getPosition());}//调整map，使其适应LatLngBounds,实现展示最佳视野的功能gmap.fitBounds(bounds);};$(function () {googleMapOperation();});</script></head><body><div id="mainMap" style="width: 1000px;height: 500px;"></div></body></html>

效果图，将四个标注展示在地图的最佳视野内：

0 0