私が念頭に置いているのは、ユーザーが最初に半径を入力する入力ボックスです。次に、その横にあるボタンで、ドラッグ可能な円をマップに追加します。
DrawingMode
Google マップ V3 で試してみました。その半径設定は無視されました。
var map;
var pos;
function initialize() {
var mapOptions = {
zoom: 16,
scaleControl: false,
zoomControl: false,
rotateControl: false,
streetViewControl: false,
panControl:false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
function setCurrentLocation(){
navigator.geolocation.getCurrentPosition(function(position) {
pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
map.setCenter(pos);
})}
setCurrentLocation();
function drawCircle(){
var draw_circle = new google.maps.Circle({
center: pos,
radius: 200,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map: map})}
$( "#addcircle" ).click(function() {
drawCircle();
});
上記の方法を使ってみました。しかし、関数内で変数pos
が有効ではないようですdrawCircle
。
$( "#addcircle" ).click(function() {
drawCircle();
});
この部分は、クリックすると円が追加される特定のボタンに関連しています。
function setCurrentLocation(){
navigator.geolocation.getCurrentPosition(function(position) {
pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
map.setCenter(pos);
function drawCircle(){
var draw_circle = new google.maps.Circle({
center: pos,
radius: 200,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map: map})}
;
drawCircle();
})}
をテストするようにコードを変更するとpos
、これは機能します。実際に円に送信されるpos
座標は有効です。
drawCircle();
しかし、ボタンクリックハンドラーを配置すると、関数を機能させることができません。