Question

我有以下代码，我想使用输入框和按钮通过用户的输入设置和更改圆的半径。任何帮助将不胜感激。编辑。这是基于下面提供的示例的修订代码，但仍然不适合我。我们将不胜感激。

<apex:page controller="GeoLocatorController" sidebar="false" showheader="false">

<head>


<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { width:100%;height:80%; }
.controls    

</style>


<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBJkHXEVXBSLY7ExRcxoDxXzRYLJHg7qfI"></script>


<script>

var circle;


function initialize() {

//Setting default center of the system
var mapCenter = {
    center: new google.maps.LatLng(36.2048, 138.2529),
    zoom: 18,
    mapTypeId: google.maps.MapTypeId.ROADMAP

};
map = new google.maps.Map(document.getElementById("googleMap"), mapCenter);

//Get User's Geolocation and Set as the Center of the System
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function (position) {

        userLat = position.coords.latitude;
        userLng = position.coords.longitude;

        userLoc = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        map.setCenter(userLoc);


//User Marker's Image    
var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';


//Create Marker for the User's Location     
var centerLoc = new google.maps.Marker({
    position : new google.maps.LatLng(userLat, userLng),
    map : map,
    icon: image,
    title : 'Your Position!',
    draggable : true,
    animation: google.maps.Animation.DROP
    });


//Create Circle and Bind it to User's Location  
    circle = new google.maps.Circle({
    map: map,
    radius: 100,    // 10 miles in metres
    fillColor: '#AA0000'
    });
    circle.bindTo('center', centerLoc, 'position');
            marker.setMap(map);
    });


function updateRadius(){
var rad = document.getElementById("value_rad").value;
circle.setRadius(parseFloat(rad));
}

}

loadHotels();


}

//Load Records from Cloud    
function loadHotels({Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.GeoLocatorController.findAll}',

function(result, event){

if (event.status) {
    for (var i=0; i<result.length; i++) {
        var id = result[i].Id;
        var name = result[i].Name;
        var lat = result[i].Location__Latitude__s;
        var lng = result[i].Location__Longitude__s;
        addMarker(id, name, lat, lng);
    }
} else {
     alert(event.message);
    }
},
 {escape: true}
);       
}



//Create Markers for the Records from the Cloud        
function addMarker(id, name, lat, lng) {

var marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat, lng),
        map: map,
        title: name,
    });
    marker.setMap(map);

}

google.maps.event.addDomListener(window, 'load', initialize);
console.log()

</script>
</head>
<body>

<div id="googleMap" style="width:100%;height:80%;"/>
<input id="value_rad" />
<input id="radius" type="button" value="Search" onclick="updateRadius()"/>
</body>

</apex:page>

Answer 1

查看此代码（它的工作），并调整您的代码

＆＃13;

var user_lat;
var user_lng;

var options = {
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0
};

function success(pos) {       
   var crd = pos.coords;
   user_lat = crd.latitude;
   user_lng = crd.longitude;      
};

function error(err) {
    alert('ERROR(' + err.code + '): ' + err.message);
};


var circle;
var myCenter;

function initialize() {

    navigator.geolocation.getCurrentPosition(success, error, options);
    myCenter = new google.maps.LatLng(user_lat, user_lng);
    var mapProp = {
        center: myCenter,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
    var marker = new google.maps.Marker({
        position: myCenter,
    });
    
    circle = new google.maps.Circle({
        map: map,
        radius: 100,    // 10 miles in metres
        fillColor: '#AA0000',
        center: myCenter
     });               
    
    marker.setMap(map);
}

function updateRadius(){
 var rad = document.getElementById("value_rad").value;
 circle.setRadius(parseFloat(rad));
}

google.maps.event.addDomListener(window, 'load', initialize);

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBJkHXEVXBSLY7ExRcxoDxXzRYLJHg7qfI"></script>


<div id="googleMap" style="width:500px;height:380px;"></div>
<input id=value_rad />
<input id="radius" type="button" value="test" onclick="updateRadius()"/>

＆＃13;

我无法使用用户Google Map API的输入框和按钮更改半径的大小

1 个答案: