放大谷歌地图标记
zoom in on google map markers
我使用Google Maps API来显示帐户位置，并有一个功能可以显示附近的帐户位置。问题是，当调用getNearbyAccounts函数时，我想放大以显示标记。在当前缩放级别下，无法看到所有标记。它看起来就像一堆乱七八糟的标记。
这是我的页面代码：
<apex:page standardController="Account" extensions="AccountMapControllerExtension" doctype="html-5.0" >
<apex:sectionHeader title="Account Mapping Tool"/>
<title>Account Map</title>
<head>
<!-- STYLE SHEETS -->
<apex:stylesheet value="{!URLFOR ($Resource.jQueryUI, '/css/ui-lightness/jquery-ui-1.9.0.custom.css')}" />
</head>
<style>
.urlLinks {
color: blue;
text-decoration:underline
}
#map {
font-family: Arial;
font-size:12px;
line-height:normal !important;
height:400px;
padding: 20px;
}
.roundCornerCss{
/* outer shadows (note the rgba is red, green, blue, alpha) */
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);
/* rounded corners */
-webkit-border-radius: 12px;
-moz-border-radius: 7px;
border-radius: 7px;
/* gradients */
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%, white), color-stop(15%, white), color-stop(100%, #D7E9F5));
background: -moz-linear-gradient(top, white 0%, white 55%, #D5E4F3 130%);
}
#loadingScreen {
background: url({!URLFOR($Resource.Markers, 'Markers/ajax-loader.gif')}) no-repeat 5px 8px;
padding-left: 50px;
}
/* hide the close x on the loading screen */
.loadingScreenWindow .ui-dialog-titlebar-close {
display: none;
}
</style>
<body>
<apex:includeScript value="{!URLFOR($Resource.jQueryUI, '/js/jquery-1.8.2.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.jQueryUI, '/js/jquery-1.8.2.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.jQueryUI, '/js/jquery-ui-1.9.0.custom.js')}"/>
<script type="text/javascript"
src="https://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
// Global Variables
var geocoder;
var map;
var infowindow = new google.maps.InfoWindow();
var places = [];
var title_content = new Array();
var popup_content = new Array();
var address = new Array();
var address_position = 0;
var timeout = 600;
var pendingCalls = {};
var markersArray = [];
$j = $.noConflict(); // No Conflict Custom $j
// Initialize
$j(document).ready(function(){
var acctId = document.getElementById("hdnAccountId").value;
if(acctId == "") {
$j("#inputDiv").css("display","none");
}
regDialogs();
});
// Load Google Map
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(42.3583, -71.0603); // Boston, MA as Center
var myOptions = {
zoom: 3,
center: latlng,
mapTypeId: 'roadmap'
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
}
function regDialogs(){
$j( "#pendDiv" ).dialog({
autoOpen: false,
title: 'Pending Call Reports'
});
$j("#loadingScreen").dialog({
autoOpen: false, // set this to false so we can manually open it
dialogClass: "loadingScreenWindow",
closeOnEscape: false,
draggable: false,
width: 460,
minHeight: 50,
modal: true,
buttons: {},
resizable: false,
open: function() {
// scrollbar fix for IE
$j('body').css('overflow','hidden');
},
close: function() {
// reset overflow
$j('body').css('overflow','auto');
}
}); // end of dialog
}
// Waiting Dialog on Loading
function waitingDialog() {
$j("#loadingScreen").html('<p>Please Wait ...</p>');
$j("#loadingScreen").dialog('option', 'title', 'Loading');
$j("#loadingScreen").dialog('open');
}
// Close Waiting Dialog
function closeWaitingDialog() {
$j("#loadingScreen").dialog('close');
}
function getCurrentAccountMap() {
var billingStreet = '{!account.BillingStreet}';
var billingCity = '{!account.BillingCity}';
var billingState = '{!account.BillingState}';
var billingCountry = '{!account.BillingCountry}';
var billingPostalCode = '{!account.BillingPostalCode}';
address_position = 0;
$j("#messages").empty();
clearOverlay(); // Remove existing markers if any
var addr = billingStreet + ',' + billingCity + ',' +
billingState + ',' + billingCountry + ',' +
billingPostalCode;
address.push(addr);
addMarker(address_position);
}
function getAccountsNearbyMap(){
waitingDialog(); // Start Loading
var lat = '{!account.Geolocation__Latitude__s}';
var lng = '{!account.Geolocation__Longitude__s}';
var distance = '';
lat = parseFloat(lat);
lng = parseFloat(lng);
if($j("select option:selected").text() == 'within 10 miles'){
distance = $j("select option:selected").val()
}
if($j("select option:selected").text() == 'within 25 miles'){
distance = $j("select option:selected").val()
}
if($j("select option:selected").text() == 'within 50 miles'){
distance = $j("select option:selected").val()
}
if($j("select option:selected").text() == 'within 100 miles'){
distance = $j("select option:selected").val()
}
if($j("select option:selected").text() == 'within 250 miles'){
distance = $j("select option:selected").val()
}
if($j("select option:selected").text() == 'within 500 miles'){
distance = $j("select option:selected").val()
}
AccountMapControllerExtension.getNearbyAccounts(lat,lng,distance,function(result,event){
$j("#messages").empty();
clearOverlay(); // Remove existing markers if any
if(event.type == 'exception'){
alert('Error ' + event.message);
}else {
address = new Array();
address_position = 0;
var completeDate = '';
var pendClick = '';
var hasCallRecords = false;
$j.each(result,function(rec){
var addr = result[rec].BillingStreet + ',' + result[rec].BillingCity + ',' +
result[rec].BillingState + ',' + result[rec].BillingCountry + ',' +
result[rec].BillingPostalCode;
address.push(addr);
});
if(address.length > 1){
addMarker(address_position);
}else{
addMarker(address_position);
$j("#messages").append('<h3 style="color:red;">There are no nearby accounts found within the range specified</h3><br/>');
closeWaitingDialog();
return false;
}
}
});
}
function addMarker(position){
geocoder.geocode({'address': address[position]}, function(results, status){
if (status == google.maps.GeocoderStatus.OK) {
places[position] = results[0].geometry.location;
var marker = new google.maps.Marker({
position: places[position],
title:title_content[position],
icon: getMapIconUrl(position),
map: map
});
map.setCenter(marker.getPosition());
map.setZoom(map.getZoom()+2);
markersArray.push(marker);
google.maps.event.addListener(marker, 'click', function() {
if (!infowindow) {
infowindow = new google.maps.InfoWindow({maxWidth: 200});
}
infowindow.setContent(popup_content[position]);
infowindow.open(map, marker);
});
}
else{
if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT){
setTimeout(function() { addMarker(position); }, (timeout * 3));
}
}
address_position++;
if (address_position < address.length){
setTimeout(function() { addMarker(address_position); }, (timeout));
}
closeWaitingDialog();
});
}
function clearOverlay(){
for (var i = 0; i < markersArray.length; i++ ) {
markersArray[i].setMap(null);
}
}
/*
Sets the Marker Type/Color
*/
function getMapIconUrl(markerNumber){
var mapIconUrl = "{!URLFOR($Resource.Markers, 'Markers/PinkPin.png')}";
return mapIconUrl;
}
window.onload = function() {
getCurrentAccountMap();
};
</script>
<!-- HTML Content -->
<input type="hidden" value="{!account.Id}" id="hdnAccountId" />
<div id="inputDiv">
Search Nearby Accounts
<select id="selectOption">
<option value="10">within 10 miles</option>
<option value="25">within 25 miles</option>
<option value="50">within 50 miles</option>
<option value="100">within 100 miles</option>
<option value="250">within 250 miles</option>
<option value="500">within 500 miles</option>
</select><br/>
<div id="rangeDiv"></div><br/>
<input type="button" onclick="getAccountsNearbyMap();" class="btn" value="Get Accounts Nearby"/>
</div><br/><br/>
<div id="messages"></div><br/>
<div id="map" class="roundCornerCss"></div>
<script>
initialize();
</script>
<div id="canvas_div"></div>
<div id="pendDiv"></div>
<div id="loadingScreen"></div>
</body>
</apex:page>
谢谢你的帮助。
您只是想提高缩放级别吗。这可以通过设置缩放来完成
map.setZoom(map.getZoom()+2)
2个选项：
-
在您的"addMarker"函数中，将标记的位置添加到google.maps.LatLngBounds对象（带有.extend）中，然后在所有标记都放置在地图上后，在生成的边界上执行map.fitBounds
-
创建一个google.maps.Circle，搜索半径以搜索位置为中心（如果需要，请显示它），然后获取它的边界并绘制地图。fitBounds on it。
相关文章：
- 如何更改角度谷歌地图上的集群图标
- 谷歌地图API-显示具有不同图标的标记
- 谷歌地图-更改图层图标大小
- 在地图加载/页面加载时，我想将地图设置为当前地理位置，但不想在地图上显示定位图标
- 将图标作为参数传递不会;t工作-谷歌地图
- 谷歌地图隐藏手图标
- 从谷歌地图信息窗口中删除关闭图标
- 在javascript中设置谷歌地图标记图标属性
- 我是否可以在单击特定图标时更改地图标记图标，然后在单击另一个图标时切换，等等
- 我如何才能在某些条件下更改c#中谷歌地图标记的图标
- 使用HTML元素代替gmap3的地图标记图标
- 谷歌地图标记图标作为变量
- 我如何使谷歌地图不更改标记的自定义图标大小
- 饼图而不是谷歌地图中的标记集群图标
- 如何在谷歌地图上放置图标标记，图标数量是否有配额
- 可拖动图标未显示在 Google 地图顶部且不重复
- 谷歌地图v3更改标记图标在安卓网络视图
- AngularJS谷歌地图(ng-map）图标网址不起作用
- 带有群集和过滤器复选框的地图框个性化图标
- 添加 removeMarker 函数时，每 5 秒在地图上加载一次图钉不会显示图标
