javascript - 放大谷歌地图标记

Question

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

谢谢你的帮助。

score 0 · Accepted Answer

您是否只是想增加缩放级别。这可以通过设置缩放来完成

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

score 0 · Accepted Answer

2个选项：

在您的“addMarker”函数中，将标记的位置添加到google.maps.LatLngBounds对象（使用 .extend），然后在地图上放置所有标记后，在结果边界上执行map.fitBounds
创建一个以搜索位置为中心的搜索半径的google.maps.Circle（如果需要，可以显示它），然后获取它的边界并在其上执行 map.fitBounds。

javascript - 放大谷歌地图标记

2 回答 2

Related

Reference