放大谷歌地图标记

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

感谢您的帮助。

来源

2013-07-20 Dman100

你究竟想要做什么？缩放以适合所有的标记？缩放以适合某些要定义的标记子集？你有什么尝试？您是否看过[文档中的fitBounds方法]（https://developers.google.com/maps/documentation/javascript/reference#Map）？ – geocodezip

你只是想增加缩放级别。这可以通过将变焦进行

map.setZoom(map.getZoom()+2)

来源

2013-07-20 02:18:56

我尝试过'map.setZoom（map.getZoom（）+ 2）'，但它放大了默认的纬度/经度坐标，而不是标记所在的位置。默认情况下，它被设置为马萨诸塞州波士顿，但是，标记位置位于不同位置，所以我需要它放大标记位置。 – Dman100

哦。那里有多少个标记？如果有一个标记可以使用map.setCenter（marker.getPosition（）） –

我添加了'map.setCenter（marker.getPosition（））'和'map.setZoom（map.getZoom（）+ 2）'。在我的原始文章中查看我的更新代码。它正在放大并正确定位，但每次点击按钮查找附近的帐户时，它都会再次放大，再次放大，等等。最初，当我点击页面时，它会显示一个帐户的一个标记位置，我想定位地图，然后当点击获取附近的帐户时，我想放大到足够的大小，这样所有标记都不会彼此混淆。 – Dman100

2种选择：

在你的“addMarker”功能，添加标记的位置到google.maps.LatLngBounds对象（.extend），那么一旦所有标记已被放置在地图上，对得到的界限
创建为中心的搜索位置（如果你想显示它），搜索半径google.maps.Circle做一个map.fitBounds，然后得到它的界限，做一个地图。 fitBounds o它。

来源

2013-07-21 08:49:18 geocodezip

放大谷歌地图标记

回答

相关问题